/* Document
* ========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
:where(html) {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
text-size-adjust: 100%; /* 2 */
}
/* Sections
* ========================================================================== */
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Edge, Firefox, and Safari.
*/
:where(h1) {
font-size: 2em;
margin-block-end: 0.67em;
margin-block-start: 0.67em;
}
/* Grouping content
* ========================================================================== */
/**
* Remove the margin on nested lists in Chrome, Edge, and Safari.
*/
:where(dl, ol, ul) :where(dl, ol, ul) {
margin-block-end: 0;
margin-block-start: 0;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Correct the inheritance of border color in Firefox.
*/
:where(hr) {
box-sizing: content-box; /* 1 */
color: inherit; /* 2 */
height: 0; /* 1 */
}
/* Text-level semantics
* ========================================================================== */
/**
* Add the correct text decoration in Safari.
*/
:where(abbr[title]) {
text-decoration: underline;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
:where(b, strong) {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
:where(code, kbd, pre, samp) {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
:where(small) {
font-size: 80%;
}
/* Tabular data
* ========================================================================== */
/**
* 1. Correct table border color in Chrome, Edge, and Safari.
* 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
*/
:where(table) {
border-color: currentColor; /* 1 */
text-indent: 0; /* 2 */
}
/* Forms
* ========================================================================== */
/**
* Remove the margin on controls in Safari.
*/
:where(button, input, select) {
margin: 0;
}
/**
* Remove the inheritance of text transform in Firefox.
*/
:where(button) {
text-transform: none;
}
/**
* Correct the inability to style buttons in iOS and Safari.
*/
:where(button, input:is([type=button i], [type=reset i], [type=submit i])) {
-webkit-appearance: button;
}
/**
* Add the correct vertical alignment in Chrome, Edge, and Firefox.
*/
:where(progress) {
vertical-align: baseline;
}
/**
* Remove the inheritance of text transform in Firefox.
*/
:where(select) {
text-transform: none;
}
/**
* Remove the margin in Firefox and Safari.
*/
:where(textarea) {
margin: 0;
}
/**
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
* 2. Correct the outline style in Safari.
*/
:where(input[type=search i]) {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style upload buttons in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/**
* Remove the inner border and padding of focus outlines in Firefox.
*/
:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus outline styles unset by the previous rule in Firefox.
*/
:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Remove the additional :invalid styles in Firefox.
*/
:where(:-moz-ui-invalid) {
box-shadow: none;
}
/* Interactive
* ========================================================================== */
/*
* Add the correct styles in Safari.
*/
:where(dialog) {
background-color: white;
border: solid;
color: black;
height: -moz-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: fit-content;
}
:where(dialog:not([open])) {
display: none;
}
/*
* Add the correct display in all browsers.
*/
:where(summary) {
display: list-item;
}
@charset "UTF-8";
/**
* Core bundle
*/
/**
* Variables and mixins ! must import first !
*/
/*
* global variables
*/
/**
* Accent style guide variables
*/
/* Accent Background colors */
/* Accent Studio colors */
/* Accent Typography colors */
/* Accent Font */
/* Accent font size */
/* Accent line height */
/* Heading line height */
/* Site vars */
/* region wrapper - for global_breakpoints */
/* endregion wrapper */
/* indents */
/* link */
/* text selection highlighting */
/* region scrollbar */
/* endregion scrollbar */
/* region forms */
/* --form-control-color: $accent-ordinary-color; */
/* additional height for errors in grouped area */
/* endregion forms */
/* region switch */
/* endregion switch */
/* region grid */
/* endregion grid */
/* region tooltip */
/* endregion tooltip */
/* region popover */
/* endregion popover */
/* region loaders */
/* endregion loaders */
/* region collapsible panel */
/* endregion collapsible panel */
/* region tables */
/* endregion tables */
/* region table in popup */
/* endregion table in popup */
/* region table with action */
/* region accent table */
/* region accent table */
/* endregion table with action */
/* endregion tables */
/* region progress bar */
/* endregion progress bar */
/* region complete indicator */
/* endregion complete indicator */
/* region placeholder */
/* endregion placeholder */
/* region thumbnail */
/* endregion thumbnail */
/* region player */
/* endregion player */
/* region photo player */
/* endregion photo player */
/* region pager */
/* endregion pager */
/* multiselect */
/* multiselect */
/* region overflow detector */
/* endregion overflow detector */
/* region alerts */
/* endregion alerts */
/* range input */
/* range input */
/* anchor input */
/* anchor input */
/* list */
/* list */
/* region icon close */
/* endregion icon close */
/**
* Global breakpoints for site
*
* @posfix:
* -rg - (regular) standard site width
* -md - (medium) site width for small windows
* -tb - (tablet) site width for tablet devices
*
* Use postfix for classes and modifiers specify for site width (Ex: .class_name-tb | __class_modifier-md)
* NOTE: for custom variables and scss files use postfix similarly
*/
/**
* Accent grid breakpoints
*
* Initial breakpoint for desktop - xlg, secondary - lg
*
* Mobile breakpoints:
* sms 320 (small small - Samsung Galaxy S)
* sm 360 (small x - Samsung Galaxy Nexus)
* smx 375 (small 2x - iPhone 6)
* sm2x 414 (small 3x - iPhone 8 Plus)
* Tablet breakpoints:
* mds 600 (medium small - Asus Nexus 7 (2013))
* md 768 (medium - Apple iPad Mini)
* mdx 1024 (medium x - BlackBerry PlayBook)
* Desktop breakpoints:
* lg 1280 (large)
* lgx 1366 (large x)
* lg2x 1600 (large 2x)
* xlg 1920 (extra large - full hd)
* xlgx 3840 (extra large x - 4k)
*/
/* 320 x 570 (Samsung Galaxy S) */
/* 360 x 640 (Samsung Galaxy Nexus) */
/* 375 x 667 (iPhone 6, iPhone 7) */
/* 375 x 667 (iPhone 8 Plus) */
/* 600 x 961 (Asus Nexus 7 (2013)) */
/* 768 x 1024 (Apple iPad Mini) */
/* 1024 x 600 (small tablet, ex: ipad mini 7.9`). ratio - 1,33 (4:3) */
/* 1280 x 720 (notebook). ratio - 1,78 (16:9) */
/* WXGA (HD Ready) 1366 x 768 (popular notebook). ratio - 1,78 (683:384) */
/* wXGA++ 1600 x 900 (popular notebook). ratio - 1,78 (16:9) */
/* Full HD 1920 × 1080 (normal monitor). ratio - 1,77 (16:9) */
/* Ultra HD 3840 × 2160 (4k monitors). ratio - 1,78 (16:9) */
/**
* Heading
*/
/* Heading colors */
/* Heading font size */
/* mobile Heading font size */
/**
* z-index variables
*
* Please add here all z-index values
*/
/* region ColorPicker */
/* endregion ColorPicker */
/* region Profile Schedule */
/* endregion Profile Schedule */
/* region chat */
/* endregion chat */
/* region Mobile Tabs */
/* the element must be over the .bmt_tab in active state */
/* endregion Mobile Tabs */
/* region Mobile Table Popup */
/* endregion Table Mobile Popup */
/* region Exit White Popup */
/* endregion Exit White Popup */
/* region Chat Notification Panel Widget */
/* endregion Chat Notification Panel Widget */
/* region Reply Conversation Smile Replace */
/* endregion Reply Conversation Smile Replace */
/* region Static Page Search */
/* endregion Static Page Search */
/* region Support Help Page */
/* endregion Static Page Search */
/* region Static Page Cards block */
/* endregion Static Page Cards block */
/**
* @see: grid_breakpoints.scss
*
* Usage:
* @media $normal_viewport_only {
* ...
* }
*/
/* retina */
/* ---------------------------------------------- Global ---------------------------------------------- */
/* region ---- only ---- */
/* only phone */
/* only phone-large */
/* only tablet */
/* only notebook */
/* only desktop */
/* only desktop-large */
/* only normal */
/* endregion ---- only ---- */
/* region ---- and more ---- */
/* only phone and more */
/* only phone-large and more */
/* only tablet and more */
/* only notebook and more */
/* only desktop and more */
/* only desktop-large and more */
/* only tv and more */
/* endregion ---- and more ---- */
/* region ---- less ---- */
/* only phone less */
/* only phone-large less */
/* only tablet less */
/* only notebook less */
/* only desktop less */
/* only desktop-large less */
/* endregion ---- less ---- */
/* -------------------------------------------- Components ------------------------------------------- */
/* region for large site width */
/* endregion for large site width */
/* region for standard site width */
/* endregion for standard site width */
/* region for tablet site width */
/* endregion for tablet site width */
/* region for medium mobile site width */
/* endregion for medium mobile site width */
/* region for mobile site width */
/* endregion for mobile site width */
/* region for mobile Hero slider */
/* endregion for mobile Hero slider */
/* region for mobile follow pages */
/* endregion for mobile follow pages */
/* region for desktop player media */
/* endregion for desktop player media */
/* region for mobile IM tip before start block */
/* endregion for mobile IM tip before start block */
/* ---------------------------------------- Device Orientation --------------------------------------- */
/* region for device orientation*/
/* endregion for device orientation */
/* ---------------------------------------------- Pages ---------------------------------------------- */
/* region for contest page */
/* endregion contest page */
/* region for chat page */
/* endregion chat page */
/* ------------------------------------------- Mobile Pages ------------------------------------------- */
/* region for mobile guest home page */
/* endregion for mobile guest home page */
/* region for contest mobile page */
/* endregion contest page */
/* ---------------------------------------------- Popups ---------------------------------------------- */
/* region for no need popup */
/* endregion for no need popup */
/* ------------------------------------------- Mobile Pages ------------------------------------------- */
/* region for mobile dashboard page */
/* endregion for mobile dashboard page */
/* region for mobile profile schedule page */
/* endregion for mobile profile schedule page */
/**
* Flags sprite variables variables
*/
/**
* Mixins
*/
/**
* include fonts for site (deprecated?)
*
* $fontName - real name of font (used for font-family)
* $fontWeight - font-weight property
* fontStyle - font-style property
* $localName, $localPestfix - create local src for search font on client
* $localName2, $localPestfix2 - for create local src for search font on client
* $pathFile - path for font files
*/
/* region Font-weight hack for Windows 10 Chrome 96 emoji bug */
/* endregion Font-weight hack for Windows 10 Chrome 96 emoji bug */
/**
* Include fonts for console
*
* $fontName - real name of font (used for font-family)
* $fontWeight - font-weight property
* fontStyle - font-style property
* $pathFile - path for font files
* $localName - create local src for search font on client
* $localName2 - for create local src for search font on client
*/
/* stylelint-disable */
/**
* Correct image rendering
* @see: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
* Autoprefexer not insert non-standard prefixes
*/
/**
* Pixel image rendering
* @see: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
* Autoprefexer not insert non-standard prefixes
*/
/**
* Auto image rendering
* @see: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
* Autoprefexer not insert non-standard prefixes
*/
/**
* Border dashed mixin
* NOTICE: $color - rgb
*/
/**
* Mixins svg icon:
* 1. svg_icon_hover - for icon state (Default, Hover (active))
* 2. svg_icon_button - for icon state (Default, Hover (active), Disabled)
*
*=========================
* 1. svg_icon_hover
* Mixin svg hover state
*==========================
* 2. svg_icon_button
* Mixin svg button state
*
* Modifiers
* $svgClass.__disabled - mod for disabled icon
*===========================
*/
/**
* Tooltip arrow mixin
* Reformats SVG to URI for use as CSS
* - data/assets/images/bm/ui/ui_tooltip_arrow_top.svg
* For inlining, used https://yoksel.github.io/url-encoder/
* NOTICE: $color - rgb
*/
/**
* Text fading mixins
*/
/**
* @var number $width - width of fading
* @var color $bgColor - fading color
* @var bool $needRelative - need relative for parent
*/
/**
* @var number $width - width of fading
* @var number $height - height of fading (need EQUALS line-height)
* @var color $bgColor - fading color
* @var bool $needRelative - need relative for parent
*/
/**
* Mixins for sprite images
*
* Sprite variables located in variables path @see: /src/frontend/core/variables/sprites.scss
*
* sprite sheets mixins
* sprite - sprite (url, width and height)
* sprite_url - only url of sprite
* sprite_width - only width of sprite
* sprite_height - only height of sprite
* sprite image mixins
* sprite_image - sprite image (position, width and height)
* sprite_image_url - sprite url by sprite image name (analog mixin sprite_url)
* sprite_image_with_url - sprite image (position, url, width and height)
* sprite_image_width - only sprite image width
* sprite_image_height - only sprite image height
* sprite_image_position - only sprite image position
*
* Example:
* .billing_icon {
* @include sprite(billing);
* }
*
* billing - name of sprite
*
* .billing_icon {
* @include sprite_image(billing_visa_icon);
* }
*
* billing_visa_icon - {sprite_name}_{image_name_included_in_sprite}
*/
/**
* Switch toggler mixin
* Reformats SVG to URI for use as CSS
* - data/assets/images/bm/ui/ui_switch_toggler.svg
* For inlining, used https://yoksel.github.io/url-encoder/
* NOTICE: $bgColor - rgb, $shadowColor - rgba
*/
/**
* Checkbox mark mixin
* Reformats SVG to URI for use as CSS
* - data/assets/images/bm/ui/ui_checkbox_mark.svg
* For inlining, used https://yoksel.github.io/url-encoder/
* NOTICE: $color - rgb
*/
/**
* #js-css .js-{$name} need for say js about $value @see: JsCssProps.ts
*
* If you have send some values, then concat values in string separated by ":" EX: "{$value1}:{$value2}"
*/
/**
* Pure Css 100vh or 100vw Fix
*
* It works in Chrome (just -webkit-fill-available causes problems in Chrome in some cases),
* iOS/iPad/MacOS Safari and [all other browsers]. Pure CSS solution, no JS required.
*
* @see: https://caniuse.com/intrinsic-width
*/
/**
* base styles
*/
/* stylelint-disable */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
MODIFIED BY MAXIM ZIMENKOV
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html,
body {
height: 100%;
}
body {
line-height: 1;
color: #000;
background: #fff;
box-sizing: border-box;
font-synthesis: none; /* For Disable Fake Bolding of Web Fonts */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* See https://crab.media/browse/BGM-3133 */
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
svg {
fill: currentColor;
stroke: inherit;
transform: translateZ(0); /* for blured svg */
user-select: none;
}
path {
vector-effect: non-scaling-stroke;
}
a,
:visited {
outline: 0;
outline: none;
}
:hover,
:active,
:focus {
outline: 0;
outline: none;
}
button:focus,
a:focus,
select:focus,
textarea:focus,
input:focus {
outline: 0;
outline: none;
}
a, button, input, select, textarea, label {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a, area, button, input, label,
select, summary, textarea {
touch-action: manipulation;
}
img {
max-width: 100%;
height: auto;
user-select: none;
-ms-interpolation-mode: bicubic; /* IE (non-standard property) */
image-rendering: auto;
}
/* Remove ugly appearance in IE and Edge */
input:required:invalid {
outline: none;
}
/* For Firefox */
object {
outline: none;
}
a {
/* for some ie 11 need declare */
text-decoration: underline;
}
/* For IE */
select::-ms-expand {
/* Get rid of drop-down arrow */
display: none;
}
/* For Firefox */
@-moz-document url-prefix() {
input,
button,
select,
textarea {
/**
* Suppress red glow that Firefox
* adds to form fields by default,
* even when user is still typing.
*/
/**
* Kill phantom spacing and dotted
* border that appears in Firefox.
*/
}
input:invalid,
button:invalid,
select:invalid,
textarea:invalid {
-moz-box-shadow: none;
box-shadow: none;
}
input::-moz-focus-inner,
button::-moz-focus-inner,
select::-moz-focus-inner,
textarea::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Get rid of drop-down arrow */
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: "";
}
}
/* for edge not show arrows */
input::-ms-clear {
display: none;
}
input::-ms-reveal {
display: none;
}
/* FF bug @see: https://bugzilla.mozilla.org/show_bug.cgi?id=255038 */
textarea {
overflow-x: hidden;
}
/* Overriding default properties on ios. @see: https://crab.media/browse/BGM-4062 */
input:disabled,
textarea:disabled {
opacity: 1;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number],
input[type=number]:hover,
input[type=number]:focus {
appearance: none;
-moz-appearance: textfield;
}
/* reset after normalize, please here */
/*
h1 {
margin: 0;
}
*/
/* @import "_components/fonts.scss"; */
body {
overflow-y: scroll;
color: #353c46;
font: normal 600 13px/1.6 "Open Sans", sans-serif;
background-color: #f7f7f8;
-webkit-text-size-adjust: none;
}
/* link */
a {
color: #2a96e2;
}
a:active,
a:hover {
color: #0d71ba;
}
/* text selection highlighting */
::selection {
color: #fff;
text-shadow: none;
background: #2a96e2;
}
/**
* Common heading styles
*/
.bm_h1,
.bm_h2,
.bm_h3,
.bm_h4,
.bm_h5,
.bm_h6 {
margin: 0;
padding: 0;
font-weight: 700;
line-height: 1;
}
.bm_h1.__thin,
.bm_h2.__thin,
.bm_h3.__thin,
.bm_h4.__thin,
.bm_h5.__thin,
.bm_h6.__thin {
font-weight: 600;
}
.bm_h1.__uppercase,
.bm_h2.__uppercase,
.bm_h3.__uppercase,
.bm_h4.__uppercase,
.bm_h5.__uppercase,
.bm_h6.__uppercase {
text-transform: uppercase;
}
.bm_h1.__faded,
.bm_h2.__faded,
.bm_h3.__faded,
.bm_h4.__faded,
.bm_h5.__faded,
.bm_h6.__faded {
color: #606771;
}
.bm_h1.__accent,
.bm_h2.__accent,
.bm_h3.__accent,
.bm_h4.__accent,
.bm_h5.__accent,
.bm_h6.__accent {
color: #81003a;
}
.bm_h1 {
color: #353c46;
font-size: 48px;
}
.bm_h2 {
color: #353c46;
font-size: 30px;
}
.bm_h3 {
color: #353c46;
font-size: 24px;
}
.bm_h4 {
color: #353c46;
font-size: 18px;
}
.bm_h5 {
color: #353c46;
font-size: 16px;
}
.bm_h6 {
color: #353c46;
font-size: 14px;
}
/**
* ui
*/
/**
* Color Picker
*
* @prefix:
* - cp_ = bm_color_picker
*
* Modifiers
* .cp_selector_row.__buttons - mod for row with buttons
*/
/**
* Style hue(color tone) for Color Picker
*/
.bm_color_picker .cp_hue {
position: relative;
/* box-sizing: border-box; TODO: need uncomment after fix styles */
width: 31px;
min-width: 10px;
margin-left: 7px;
padding: 0 5px;
user-select: none;
}
.bm_color_picker .cp_hue_inner {
width: 100%;
height: 239px;
background: linear-gradient(to bottom, #f00 0%, #f0f 17%, #00f 33%, #0ff 50%, #0f0 67%, #ff0 83%, #f00 100%);
}
.bm_color_picker .cp_hue_cursor {
position: absolute;
top: 0;
right: 5px;
left: 5px;
height: 8px;
margin-top: -3px;
}
.bm_color_picker .cp_hue_cursor:after {
content: "";
position: absolute;
right: -4px;
width: 0;
height: 0;
border: 4px solid transparent;
border-right: 4px solid #3f3f3f;
}
.bm_color_picker .cp_hue_cursor:before {
content: "";
position: absolute;
left: -4px;
width: 0;
height: 0;
border: 4px solid transparent;
border-left: 4px solid #3f3f3f;
}
/**
* Style Carousel for Color Picker
*
* @prefix:
* - cpcc_ = .cp_carousel_colors
*
* Modifiers
* .cp_carousel_arrow.__disabled - style for disabled carousel arrow
* .cp_carousel_arrow.__left - mod for direction arrow left
* .cp_carousel_arrow.__right - mod for direction arrow right
*/
.bm_color_picker .cp_carousel {
margin: 0 -5px 10px -3px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.bm_color_picker .cp_carousel_arrow {
position: relative;
width: 22px;
height: 20px;
cursor: pointer;
user-select: none;
}
.bm_color_picker .cp_carousel_arrow:before, .bm_color_picker .cp_carousel_arrow:after {
content: "";
position: absolute;
left: 9px;
width: 2px;
height: 10px;
background: #414550;
}
.bm_color_picker .cp_carousel_arrow:before {
top: 2px;
transform: rotate(45deg);
}
.bm_color_picker .cp_carousel_arrow:after {
bottom: 2px;
transform: rotate(-45deg);
}
.bm_color_picker .cp_carousel_arrow:hover:before, .bm_color_picker .cp_carousel_arrow:hover:after {
background: #7d7d7d;
}
.bm_color_picker .cp_carousel_arrow.__disabled {
cursor: default;
}
.bm_color_picker .cp_carousel_arrow.__disabled:before, .bm_color_picker .cp_carousel_arrow.__disabled:after, .bm_color_picker .cp_carousel_arrow.__disabled:hover:before, .bm_color_picker .cp_carousel_arrow.__disabled:hover:after {
background: #959fb0;
}
.bm_color_picker .cp_carousel_arrow.__left:before {
top: 2px;
left: 5px;
transform: rotate(45deg);
}
.bm_color_picker .cp_carousel_arrow.__left:after {
bottom: 2px;
left: 5px;
transform: rotate(-45deg);
}
.bm_color_picker .cp_carousel_arrow.__right:before {
top: auto;
bottom: 2px;
}
.bm_color_picker .cp_carousel_arrow.__right:after {
top: 2px;
bottom: auto;
}
.bm_color_picker .cp_carousel_colors {
position: relative;
width: 100%;
height: 20px;
overflow: hidden;
}
.bm_color_picker .cp_carousel_colors .cpcc_inner {
position: absolute;
transform: translateX(0);
transition: transform 0.1s ease;
}
.bm_color_picker .cp_carousel_colors .cpcc_item {
min-width: 20px;
border-radius: 3px;
cursor: pointer;
}
/**
* Style saturation for Color Picker
*
* @prefix:
* - cpsc_ = .cp_saturation_cursor
*
* Modifiers
* .cp_saturation_gradient.__white
* .cp_saturation_gradient.__black
*/
.bm_color_picker .cp_saturation {
position: relative;
flex-shrink: 0;
width: 254px;
height: 239px;
user-select: none;
}
.bm_color_picker .cp_saturation_gradient {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.bm_color_picker .cp_saturation_gradient.__white {
background: linear-gradient(to right, #fff, transparent);
}
.bm_color_picker .cp_saturation_gradient.__black {
background: linear-gradient(to top, #000, transparent);
}
.bm_color_picker .cp_saturation_cursor {
position: absolute;
width: 8px;
height: 8px;
}
.bm_color_picker .cp_saturation_cursor .cpsc_inner {
position: absolute;
width: 8px;
height: 8px;
background: transparent;
border: 1px solid #000;
border-radius: 50%;
}
.bm_color_picker {
position: relative;
}
.bm_color_picker.__popover {
min-height: 30px;
padding: 7px 16px;
}
.bm_color_picker .cp_selector {
padding: 6px 0 4px;
background-color: #fff;
}
.bm_color_picker .cp_selector_row {
display: flex;
align-items: center;
justify-content: space-between;
}
.bm_color_picker .cp_selector_row.__buttons {
margin-top: 13px;
margin-right: 5px;
}
.bm_color_picker .cp_selector_color {
display: flex;
align-items: center;
min-width: 0;
}
.bm_color_picker .cp_selector_color_hex {
font-size: 12px;
}
.bm_color_picker .cp_selector_color_hash {
margin: 0 1px 0 4px;
}
.bm_color_picker .cp_selector_color_square {
width: 30px;
min-width: 10px;
margin-left: 5px;
border: 1px solid #e6eaed;
border-radius: 3px;
}
.bm_color_picker .cp_selector_color_square:before {
display: block;
padding-top: 100%;
content: "";
}
.bm_color_picker .cp_selector_controls {
display: flex;
}
.bm_color_picker .cp_selector_controls .cp_selector_control {
min-width: 0;
}
.bm_color_picker .cp_selector_controls .cp_selector_control.__ok {
min-width: 81px;
margin-right: 10px;
}
.bm_color_picker .cp_select_btn {
position: relative;
display: block;
width: 36px;
height: 36px;
border: none;
border-radius: 3px;
}
.bm_color_picker .cp_select_btn_corner {
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
border: 4px solid #dededf;
border-top-color: transparent;
border-left-color: transparent;
}
.bm_color_picker .cp_select_btn_corner:before, .bm_color_picker .cp_select_btn_corner:after {
position: absolute;
right: -4px;
bottom: -4px;
width: 0;
height: 0;
content: "";
}
.bm_color_picker .cp_select_btn_corner:before {
z-index: 0;
border: 3px solid #fff;
border-top-color: transparent;
border-left-color: transparent;
}
.bm_color_picker .cp_select_btn_corner:after {
z-index: 1;
border: 2px solid #999;
border-top-color: transparent;
border-left-color: transparent;
}
.bm_color_picker .cp_select_btn_corner.light {
right: 0;
bottom: 0;
border-width: 3px;
}
.bm_color_picker .cp_select_btn_corner.light:before, .bm_color_picker .cp_select_btn_corner.light:after {
right: -3px;
bottom: -3px;
}
/* Fixed character width for color hex, works only in FF */
@-moz-document url-prefix() {
.bm_color_picker .cp_selector_color_hex {
letter-spacing: -4.7px;
text-transform: full-width;
}
}
/*
* Style for chat overflow scroll box
*
* @prefix
* osb_ - overflow scroll box
*
* Modifiers
* .bm_overflow_sc_box.__osb_initial - mod for show initial control element
* .bm_overflow_sc_box.__osb_last - mod for show last control element
* .osb_control.__osb_c_initial - mod for initial control element
* .osb_control.__osb_c_last - mod for last control element
* .bm_overflow_sc_box.__row - mod for horizontal
* .bm_overflow_sc_box.__column - mod for vertical scroll
*/
.bm_overflow_sc_box {
position: relative;
/* default arrows styles */
}
.bm_overflow_sc_box.__osb_horizontal {
width: 100%;
}
.bm_overflow_sc_box.__osb_horizontal .osb_container {
overflow-x: scroll;
overflow-y: hidden;
}
.bm_overflow_sc_box.__osb_horizontal .osb_control {
top: 0;
height: 100%;
}
.bm_overflow_sc_box.__osb_horizontal .osb_control.__osb_c_prev {
left: 0;
}
.bm_overflow_sc_box.__osb_horizontal .osb_control.__osb_c_next {
right: 0;
/* default arrow */
}
.bm_overflow_sc_box.__osb_horizontal .osb_control.__osb_c_next .osb_arrow {
transform: rotate(180deg);
}
.bm_overflow_sc_box.__osb_vertical {
display: flex;
flex-grow: 1;
flex-direction: column;
height: 1px;
}
.bm_overflow_sc_box.__osb_vertical .osb_container {
overflow-x: hidden;
overflow-y: scroll;
}
.bm_overflow_sc_box.__osb_vertical .osb_control {
left: 0;
width: 100%;
}
.bm_overflow_sc_box.__osb_vertical .osb_control.__osb_c_prev {
top: 0;
/* default arrow */
}
.bm_overflow_sc_box.__osb_vertical .osb_control.__osb_c_prev .osb_arrow {
transform: rotate(90deg);
}
.bm_overflow_sc_box.__osb_vertical .osb_control.__osb_c_next {
bottom: 0;
/* default arrow */
}
.bm_overflow_sc_box.__osb_vertical .osb_control.__osb_c_next .osb_arrow {
transform: rotate(-90deg);
}
.bm_overflow_sc_box .osb_control {
position: absolute;
z-index: 4;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
cursor: pointer;
user-select: none;
}
.bm_overflow_sc_box .osb_control.__hidden {
opacity: 0;
pointer-events: none;
}
.bm_overflow_sc_box .osb_container {
position: relative;
-ms-overflow-style: none; /* fix for IE */
scrollbar-width: none; /* fix for FF */
}
.bm_overflow_sc_box .osb_container::-webkit-scrollbar {
display: none;
}
.bm_overflow_sc_box .osb_arrow {
width: 15px;
height: 20px;
}
/**
* Date Picker
*
* @prefix:
* - dp_ = bm_date_picker
*
* @Modifiers:
* .datepicker.__popover - Date picker is opened as a popover
* .dp_slider_content.__disable - Current year range/year/month without hover background
* .dp_next.__disable - Disabled next arrow
* .dp_prev.__disable - Disabled prev arrow
* .dp_day_holder.__title - for days of week titles
* .dp_day.__active, .dp_week.__active, .dp_month.__active, .dp_year.__active - active date
* .dp_day_holder.__disable, .dp_week_holder.__disable, .dp_month_holder.__disable, .dp_year_holder.__disable - for disable state
* .dp_day_holder.__active, .dp_week_holder.__active, .dp_month_holder.__active, .dp_year_holder.__active - for active state
*/
.bm_date_picker .bmft_arrow {
transform: translate(-50%, 0) rotate(180deg) !important; /** @see BGM-11406 - #5 - overrides inline styles */
}
.bm_date_picker .datepicker {
max-width: 300px;
color: #353c46;
font-size: 14px;
}
.bm_date_picker .datepicker.__popover {
box-sizing: border-box;
padding: 7px 16px;
border-radius: 20px;
}
.bm_date_picker .dp_wrp {
width: 100%;
}
.bm_date_picker .dp_slider {
display: flex;
justify-content: space-between;
box-sizing: border-box;
min-height: 30px;
padding: 0 4px 10px;
border-bottom: 1px solid #e6eaed;
}
.bm_date_picker .dp_slider .dp_slider_content {
margin: auto;
padding: 0 8px;
border-radius: 4px;
}
.bm_date_picker .dp_slider .dp_slider_content.__disable, .bm_date_picker .dp_slider .dp_slider_content.disabled {
width: 100%;
text-align: center;
cursor: default;
}
.bm_date_picker .dp_slider .dp_slider_content.__disable:hover, .bm_date_picker .dp_slider .dp_slider_content.disabled:hover {
background-color: transparent;
}
.bm_date_picker .dp_slider .dp_next, .bm_date_picker .dp_slider .dp_prev {
position: relative;
width: 26px;
border-radius: 4px;
}
.bm_date_picker .dp_slider .dp_next:after, .bm_date_picker .dp_slider .dp_prev:after {
content: "";
position: absolute;
top: 7px;
right: calc(50% - 4px);
width: 5px;
height: 5px;
border-top: 1px solid #767676;
border-right: 1px solid #767676;
}
.bm_date_picker .dp_slider .dp_next.__disable, .bm_date_picker .dp_slider .dp_prev.__disable {
cursor: default;
}
.bm_date_picker .dp_slider .dp_next.__disable:after, .bm_date_picker .dp_slider .dp_prev.__disable:after {
border-color: #dedede;
}
.bm_date_picker .dp_slider .dp_next.__disable:hover, .bm_date_picker .dp_slider .dp_prev.__disable:hover {
background-color: transparent;
}
.bm_date_picker .dp_slider .dp_next:after {
right: auto;
left: calc(50% - 4px);
transform: rotate(45deg);
}
.bm_date_picker .dp_slider .dp_prev:after {
transform: rotate(-135deg);
}
.bm_date_picker .dp_picker {
display: flex;
flex-wrap: wrap;
height: auto;
padding: 4px;
}
.bm_date_picker .dp_year:hover {
background-color: #fff;
}
.bm_date_picker .dp_day_holder {
display: flex;
justify-content: center;
align-items: center;
width: 14.28571%;
height: 32px;
}
.bm_date_picker .dp_day_holder .dp_day {
box-sizing: border-box;
width: 100%;
padding: 0;
border-radius: 4px;
cursor: pointer;
}
.bm_date_picker .dp_day_holder.__title {
color: #9ba2ac;
text-transform: capitalize;
cursor: auto;
user-select: none;
}
.bm_date_picker .dp_day_holder.__title:hover {
background-color: #fff;
}
.bm_date_picker .dp_week_holder {
min-width: 33.33%;
text-align: center;
}
.bm_date_picker .dp_month_holder, .bm_date_picker .dp_year_holder {
display: flex;
justify-content: center;
align-items: center;
width: 25%;
height: 33.33%;
padding: 6px 0;
text-align: center;
}
.bm_date_picker .dp_day, .bm_date_picker .dp_week, .bm_date_picker .dp_month, .bm_date_picker .dp_year {
display: inline-block;
height: 28px;
padding: 0 8px;
color: #353c46;
white-space: nowrap;
border-radius: 4px;
cursor: pointer;
}
.bm_date_picker .dp_day.__active, .bm_date_picker .dp_week.__active, .bm_date_picker .dp_month.__active, .bm_date_picker .dp_year.__active {
background-color: #fff;
}
.bm_date_picker .dp_day, .bm_date_picker .dp_week, .bm_date_picker .dp_month, .bm_date_picker .dp_year, .bm_date_picker .dp_next, .bm_date_picker .dp_prev, .bm_date_picker .dp_slider_content {
box-sizing: border-box;
text-align: center;
border: 2px solid transparent;
cursor: pointer;
user-select: none;
}
.bm_date_picker .dp_day::selection, .bm_date_picker .dp_week::selection, .bm_date_picker .dp_month::selection, .bm_date_picker .dp_year::selection, .bm_date_picker .dp_next::selection, .bm_date_picker .dp_prev::selection, .bm_date_picker .dp_slider_content::selection {
color: inherit;
text-shadow: none;
background: none;
}
.bm_date_picker .dp_day:after, .bm_date_picker .dp_week:after, .bm_date_picker .dp_month:after, .bm_date_picker .dp_year:after, .bm_date_picker .dp_next:after, .bm_date_picker .dp_prev:after, .bm_date_picker .dp_slider_content:after {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.bm_date_picker .dp_day:hover, .bm_date_picker .dp_week:hover, .bm_date_picker .dp_month:hover, .bm_date_picker .dp_year:hover, .bm_date_picker .dp_next:hover, .bm_date_picker .dp_prev:hover, .bm_date_picker .dp_slider_content:hover {
background: #efefef;
}
.bm_date_picker .dp_month, .bm_date_picker .dp_slider_content {
text-transform: capitalize;
}
.bm_date_picker .dp_year_holder.__disable .dp_year, .bm_date_picker .dp_week_holder.__disable .dp_week, .bm_date_picker .dp_month_holder.__disable .dp_month, .bm_date_picker .dp_day_holder.__disable .dp_day {
color: #dedede;
cursor: default;
}
.bm_date_picker .dp_day_holder.__active .dp_day, .bm_date_picker .dp_week_holder.__active .dp_week, .bm_date_picker .dp_month_holder.__active .dp_month, .bm_date_picker .dp_year_holder.__active .dp_year {
color: #fff;
background-color: #2a96e2;
}
/**
* Time Picker
*
* @prefix:
* - tp_ = .bm_time_picker
*/
.bm_time_picker {
width: 100%;
}
.bm_time_picker .tp_row {
padding: 3px 16px 10px;
}
.bm_time_picker .tp_row:not(:last-child) {
border-bottom: 1px #e6eaed solid;
}
.bm_time_picker .tp_time {
font-weight: 700;
font-size: 16px;
text-align: center;
}
.bm_time_picker .tp_label {
color: #606771;
font-weight: 600;
font-size: 11px;
}
.bm_time_picker .tp_range.__hour .bm_range .bmrg_selected_edge.__to {
background: #2b9777;
}
.bm_time_picker .bm_range {
margin: 0;
padding: 0;
}
.bm_time_picker .bm_range .bmrg_label {
display: none;
}
.bm_time_picker .bm_range .bmrg_selected_range {
background: transparent;
}
/**
* Timer component
*
* @prefix:
* - bmt_ = .bm_timer
*
* Modifiers:
* - .bm_timer.__blinked - state, when timer is running
*/
/**
* Variables for Timer component
*/
/* region Common */
/* endregion Common */
.bm_timer.__blinked .bmt_divider {
animation: timer_countdown_blinking 1s ease-in-out infinite;
}
@keyframes timer_countdown_blinking {
0% {
opacity: 0.75;
}
5% {
opacity: 0.5;
}
45% {
opacity: 0.5;
}
55% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0.75;
}
}
/**
* Custom select
*
* @prefix:
* - bmsb_ = bmf_selectbox
*
* Modifiers:
* .bmf_selectbox.__opened selectbox is opened
* .bmf_selectbox.__opened_with_icon selectbox is opened with search icon
* .bmf_selectbox.__multiselect multi type of selectbox
* .bmf_selectbox.__searcher select with search icon
* .bmf_selectbox.__searcher_filled filled with search value
* .bmf_selectbox.__fs_low low height of input
* .bmf_selectbox.__has_icon option with icon
* .bms_wrp.__hidden for scroll in selectbox
* .bmsb_dropdown.__scroll for scroll static height
* .bmsb_item.__selected for selected item
* .bmsb_input_wrp.__no_arrow - for no arrow state
* .bmsb_input_wrp.__disabled - for disabled state
*
*/
/**
* SelectBox separator component basic styles
*
* @prefix:
* - bmsb_ = bmf_selectbox
*
*/
.bmf_selectbox .bmsb_separator {
display: block;
width: 100%;
height: 1px;
margin: 8px -7px;
background: #e6eaed;
}
.bmsb_dropdown .bmsb_separator {
display: block;
width: 100%;
height: 1px;
margin: 8px -7px;
background: #e6eaed;
}
.bmf_selectbox {
position: relative;
}
.bmf_selectbox input[type=search]::-webkit-search-cancel-button, .bmf_selectbox input[type=search]::-webkit-search-decoration, .bmf_selectbox input[type=search]::-webkit-search-results-button, .bmf_selectbox input[type=search]::-webkit-search-results-decoration {
display: none;
}
.bmf_selectbox:hover .bmsb_input_wrp .bmsb_arrow, .bmf_selectbox.__hover .bmsb_input_wrp .bmsb_arrow {
fill: #2a96e2;
}
.bmf_selectbox:hover .bmf_icon, .bmf_selectbox.__hover .bmf_icon {
color: #2a96e2;
fill: #2a96e2;
}
.bmf_selectbox.__opened .bmsb_input_wrp .bmsb_arrow {
transform: rotate(-180deg);
fill: #2a96e2;
}
.bmf_selectbox.__opened .bmf_icon {
color: #2a96e2;
fill: #2a96e2;
}
.bmf_selectbox.__multiselect .bmsb_input_wrp {
height: auto;
min-height: 38px;
}
.bmf_selectbox.__searcher.__opened .bmsb_input_wrp {
padding-right: 0;
}
.bmf_selectbox.__searcher.__opened .bmsb_input {
padding-right: 15px;
}
.bmf_selectbox.__searcher.__opened_with_icon .bmf_icon_search {
display: block;
}
.bmf_selectbox.__searcher.__opened_with_icon .bmsb_input {
padding-left: 45px;
}
.bmf_selectbox.__searcher .bmf_icon_search {
position: absolute;
top: 11px;
left: 16px;
display: none;
width: 16px;
height: 16px;
color: #9ba2ac;
}
.bmf_selectbox.__searcher .bmf_clear_btn {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: none;
width: 40px;
}
.bmf_selectbox.__searcher .bmf_clear_btn .bmf_icon_clear {
position: absolute;
top: 14px;
right: 15px;
width: 10px;
height: 11px;
color: #2a96e2;
}
.bmf_selectbox.__searcher.__searcher_filled .bmsb_input {
padding-right: 40px;
}
.bmf_selectbox.__searcher_filled .bmf_icon_search {
color: #2a96e2;
}
.bmf_selectbox.__searcher_filled .bmf_clear_btn {
display: block;
}
.bmf_selectbox.__searcher_filled .bmsb_input_wrp .bmsb_arrow_wrp {
display: none;
}
.bmf_selectbox.__fs_low.__multiselect .bmsb_input_wrp {
min-height: 34px;
}
.bmf_selectbox.__fs_low .bmsb_input_wrp {
height: 34px;
}
.bmf_selectbox.__has_icon .bmsb_input_wrp {
display: flex;
align-items: center;
padding-left: 10px;
}
.bmf_selectbox.__has_icon .bmsb_input_wrp .bmsb_input {
padding-left: 0;
}
.bmf_selectbox .bmsb_input_wrp {
position: relative;
height: 38px;
padding-right: 40px;
background-color: #f7f7f8;
border-radius: 20px;
cursor: pointer;
}
.bmf_selectbox .bmsb_input_wrp.__cursor_text {
padding-right: 0;
cursor: text;
}
.bmf_selectbox .bmsb_input_wrp.__cursor_text .bmsb_input {
padding-right: 40px;
}
.bmf_selectbox .bmsb_input_wrp.__no_arrow {
padding-right: 0;
}
.bmf_selectbox .bmsb_input_wrp.__disabled {
cursor: default;
}
.bmf_selectbox .bmsb_input_wrp.__disabled .bmsb_input, .bmf_selectbox .bmsb_input_wrp.__disabled .bmsb_arrow_wrp {
color: #9ba2ac;
cursor: default;
}
.bmf_selectbox .bmsb_input_wrp.__disabled .bmsb_input {
-webkit-text-fill-color: #9ba2ac;
}
.bmf_selectbox .bmsb_input_wrp.__disabled .mbsb_icon.__image {
opacity: 0.5;
}
.bmf_selectbox .bmsb_input_wrp.__disabled .bmsb_arrow {
fill: #9ba2ac;
}
.bmf_selectbox .bmsb_input_wrp .bmsb_input::placeholder {
color: #9ba2ac;
opacity: 1;
}
.bmf_selectbox .bmsb_input_wrp .bmsb_input.__as_placeholder {
color: #9ba2ac;
}
.bmf_selectbox .bmsb_input_wrp .bmsb_input.__filled::placeholder {
opacity: 0;
}
.bmf_selectbox .bmsb_input_wrp .bmsb_arrow_wrp {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 100%;
}
.bmf_selectbox .bmsb_input_wrp .bmsb_arrow {
width: 9px;
height: 6px;
fill: #9ba2ac;
}
.bmf_selectbox .bmsb_input_wrp .bmsb_input, .bmf_selectbox .bmsb_input_wrp .bmsb_selected {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0 0 0 15px;
color: #353c46;
font: 600 13px/1.4 "Open Sans", sans-serif;
background-color: transparent;
border: none;
cursor: inherit;
}
.bmf_selectbox .bmsb_input_wrp .pf_remove_icon, .bmf_selectbox .bmsb_input_wrp .pf_search_icon {
position: absolute;
top: 0;
right: 12px;
display: flex;
align-items: center;
height: 100%;
}
.bmf_selectbox .bmsb_input_wrp .mbsb_icon {
flex-shrink: 0;
margin-right: 6px;
width: 20px;
height: 20px;
}
.bmf_selectbox .bmsb_input_wrp .mbsb_icon.__hidden {
visibility: hidden;
}
.bmf_selectbox .bmsb_dropdown {
width: calc(100% - 8px); /* 8px = 2 margins by 4px */
}
.bmf_selectbox .bmsb_dropdown.__auto_w {
width: auto;
}
.bmf_selectbox .bmsb_dropdown.__full_w {
width: 100%;
}
.bmf_selectbox .bmsb_dropdown.__top {
top: auto;
bottom: 100%;
}
.bmf_selectbox .bmsb_dropdown.__bottom {
top: 100%;
bottom: auto;
}
.portal_overlay .bmsb_dropdown {
z-index: 615;
pointer-events: auto;
}
.bmsb_dropdown {
position: absolute;
top: 0;
left: 0;
z-index: 5;
box-sizing: border-box;
margin: 6px 4px;
background-color: #fff;
border: 1px solid #e8eaec;
border-radius: 15px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.bmsb_dropdown.__scroll {
height: 227px;
}
.bmsb_dropdown.__scroll .bmsb_list {
padding: 0 7px;
}
.bmsb_dropdown .bmsb_list {
padding: 7px;
}
.bmsb_dropdown .bmsb_item {
display: flex;
align-items: center;
margin: 0 0 2px;
padding: 6px 20px;
overflow: hidden;
color: #2e3945;
font: 600 13px/1.4 "Open Sans", sans-serif;
text-overflow: ellipsis;
background-color: transparent;
border-radius: 25px;
cursor: pointer;
}
.bmsb_dropdown .bmsb_item:last-child {
margin: 0;
}
.bmsb_dropdown .bmsb_item:hover {
background-color: #ecfafd;
}
.bmsb_dropdown .bmsb_item.__selected {
color: #fff;
background-color: #2a96e2;
}
.bmsb_dropdown .bmsb_item.__selected:hover {
color: #fff;
background-color: #2a96e2;
}
.bmsb_dropdown .bmsb_item.__has_icon {
padding: 6px 14px;
}
.bmsb_dropdown .bmsb_item.__active {
color: #fff;
background-color: #2a96e2;
}
.bmsb_dropdown .bmsb_item.__disabled {
color: #9ba2ac;
background-color: #f7f7f8;
cursor: default;
}
.bmsb_dropdown .bmsb_icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-right: 6px;
}
.bmsb_dropdown .bmsb_scroll {
box-sizing: border-box;
padding: 7px 0;
}
.bmsb_dropdown .bmsb_scroll > .bms_wrp {
box-sizing: border-box;
}
.bmsb_dropdown .bmsb_scroll > .bms_wrp.__vertical {
padding-right: 21px;
}
.bmsb_dropdown .bmsb_scroll > .bms_wrp.__hidden {
padding-right: 0;
}
.bmsb_dropdown .bmsb_scroll > .bms_wrp > .bms_scrollbar_wrp {
top: 13px;
right: 16px;
bottom: 13px;
}
.bm_selectbox_button {
display: flex;
}
.bm_selectbox_button .bmf_actions .bm_btn, .bm_selectbox_button .bmf_actions .bm_simple_loader {
margin-right: 0;
}
.bm_selectbox_button .bmf_actions .bm_btn {
flex-wrap: nowrap;
white-space: nowrap;
}
.bm_selectbox_button .bmf_selectbox {
width: 100%;
margin-right: -25px;
}
.bm_selectbox_button .bmf_selectbox.__icon_left .bmsb_input {
padding-left: 40px;
}
.bm_selectbox_button .bmf_selectbox.__icon_left .bmf_icon_input {
right: auto;
left: 12px;
}
.bm_selectbox_button .bmf_selectbox .bmsb_input_wrp {
/* TODO: wtf??? */
height: 40px;
cursor: default;
}
.bm_selectbox_button .bmf_selectbox .bmsb_input_wrp .bmsb_input {
padding-right: 40px;
cursor: text;
}
.bm_selectbox_button .bmf_selectbox .bm_simple_loader {
background-color: #f7f7f8;
}
/**
* Custom scrollpanel
*
* @prefix: bms = bm_scroll
*
* Modifiers:
* .bm_scroll.__no_indent - no indent from content to scroll line. By default 5px
* .bm_scroll.__over_wrp - scrollbar positioned over content
* .bm_scroll.__grabbed - on move by mouse
* .bms_wrp.__grabbed - on move by mouse
* .bms_wrp.__horizontal - remove padding for horizontal scroll
* .bms_wrp.__hidden - hide scroll
* .bms_wrp.__hidden_horizontal - hide horizontal scroll
*/
.bm_scroll {
height: 100%;
}
.bm_scroll.__over_wrp > .bms_wrp.__vertical {
padding-right: 0;
}
.bm_scroll.__over_wrp > .bms_wrp.__horizontal {
padding-bottom: 0;
}
.bm_scroll.__no_indent > .bms_wrp.__vertical {
padding-right: 5px;
}
.bm_scroll.__no_indent > .bms_wrp.__horizontal {
padding-bottom: 5px;
}
.bm_scroll > .bms_wrp {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
}
.bm_scroll > .bms_wrp:hover > .bms_scrollbar_wrp .bms_scrollbar, .bm_scroll > .bms_wrp:active > .bms_scrollbar_wrp .bms_scrollbar {
background-color: #c6c6ca;
}
.bm_scroll > .bms_wrp.__vertical {
padding-right: 10px;
}
.bm_scroll > .bms_wrp.__vertical.__horizontal > .bms_scrollbar_wrp.__vertical {
bottom: 5px;
}
.bm_scroll > .bms_wrp.__vertical.__hidden_horizontal > .bms_scrollbar_wrp.__vertical {
bottom: 0;
}
.bm_scroll > .bms_wrp.__horizontal {
padding-bottom: 10px;
}
.bm_scroll > .bms_wrp.__horizontal.__vertical > .bms_scrollbar_wrp.__horizontal {
right: 5px;
}
.bm_scroll > .bms_wrp.__horizontal.__hidden_vertical > .bms_scrollbar_wrp.__horizontal {
right: 0;
}
.bm_scroll > .bms_wrp.__hidden_vertical.__vertical {
padding-right: 0;
}
.bm_scroll > .bms_wrp.__hidden_vertical > .bms_scrollbar_wrp.__vertical {
visibility: hidden;
}
.bm_scroll > .bms_wrp.__hidden_horizontal.__horizontal {
padding-bottom: 0;
}
.bm_scroll > .bms_wrp.__hidden_horizontal > .bms_scrollbar_wrp.__horizontal {
visibility: hidden;
}
.bm_scroll > .bms_wrp > .bms_content {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0;
overflow: scroll;
scrollbar-width: none; /* fix for FF */
}
.bm_scroll > .bms_wrp > .bms_content::-webkit-scrollbar {
display: none;
}
.bm_scroll > .bms_wrp > .bms_scrollbar_wrp {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 5px;
background-color: rgba(182, 194, 195, 0.2);
border-radius: 5px;
}
.bm_scroll > .bms_wrp > .bms_scrollbar_wrp.__horizontal {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: 5px;
}
.bm_scroll > .bms_wrp > .bms_scrollbar_wrp.__horizontal .bms_scrollbar {
top: auto;
right: auto;
width: auto;
height: 5px;
}
.bm_scroll > .bms_wrp > .bms_scrollbar_wrp .bms_scrollbar {
position: absolute;
top: 0;
right: 0;
width: 5px;
background-color: rgba(81, 80, 105, 0.15);
border-radius: 5px;
cursor: pointer;
transition: background-color 500ms linear;
}
.bm_scroll > .bms_wrp > .bms_scrollbar_wrp .bms_scrollbar.__grabbed {
user-select: none;
}
/**
* Link
*
* Modifiers:
* .bm_link.__hover - hover state
* .bm_link.__disable - make link disabled
*/
.bm_link {
color: #2a96e2;
text-decoration: underline;
cursor: pointer;
}
.bm_link.__hover, .bm_link:hover {
color: #0d71ba;
}
.bm_link.__disable {
color: #353c46;
text-decoration: none;
cursor: default;
pointer-events: none;
}
/**
* List component
*/
/**
* List title component
*
* @prefix:
* bm_list_title = lt
*/
.bm_list_title {
margin: 0 0 15px;
color: #353c46;
font-weight: 700;
font-size: 14px;
}
/**
* Anchor link
*
* Modifiers:
* .bm_anchor.__hover - hover state
*
*/
.bm_anchor_wrp {
margin-bottom: -5px;
}
.bm_anchor_wrp.__inline {
margin-right: -5px;
}
.bm_anchor_wrp.__inline .bm_anchor {
margin-right: 5px;
}
.bm_anchor {
display: inline-block;
width: max-content;
max-width: 400px;
margin-bottom: 5px;
padding: 10px 18px;
color: #353c46;
text-decoration: none;
background-color: #ecfafd;
border-radius: 19px;
box-shadow: 0 1px 0 #dcf0f4;
transition: background-color 0.2s ease;
}
.bm_anchor.__hover, .bm_anchor:hover, .bm_anchor:active {
color: #353c46;
background-color: #d7f6fd;
box-shadow: 0 1px 0 #ccebf1;
}
.bm_anchor.__btn {
font: inherit;
border: none;
cursor: pointer;
}
/**
* @see: UI Style Guide
*
* TODO: if change padding-top or padding-bottom, please dont forget change margin fix for ie
*
* Default button .bm_btn.__btn_default - button with white bg and blue text
* Primary button .bm_btn.__btn_primary - button with blue bg and white text
* Primary button .bm_btn.__btn_secondary - button with blue bg and white text - need for studio
* Primary button .bm_btn.__btn_third - button with white bg and gray text - need for translator settings tooltip
* Success button .bm_btn.__btn_success - button with green bg and white text
* Brand button .bm_btn.__btn_brand - button with brand bg and white text
* Brand button .bm_btn.__btn_clear - button with transparent bg and blue text
*
* @prefix:
* .btn_ = bm_btn
* .bm_bwl_ = bm_btn_with_loader
*
* Modifiers:
* States:
* .__hover - hover button = :hover state
* .__active - active button = :active state
* .__disabled - disabled button = attr disabled
* Sizes:
* .__small - small button (less height and font-size)
* .__large - big button (large height and font-size)
* Width:
.__w_small - min-width = 100
.__w_normal - min-width = 120
.__w_medium - min-width = 150
.__w_large - min-width = 226
.__w_full - min-width = 100%
* FontWeight:
* .__thin - font weight 300
* .__regular - font weight 400
* .__semi_bold - font weight 600
* Inner position
* .__inner_left
* .__inner_center
* .__inner_right
* flex properties
* .__fl_gr = stretches the button to the available width (flex-grow: 1)
*
*/
/**
* Button icon
*
* Modifiers:
* .__left - button with icon in the start of the text
* .__right - button with icon in the end of the text
*/
/**
* btn_icon modifiers
*
* Modifiers:
* Sidebar:
* - .btn_icon.__i_sb_back_arrow
* - .btn_icon.__i_sb_cam
* - .btn_icon.__i_sb_mobile
* Common:
* - .btn_icon.__i_cross
* - .btn_icon.__i_back_arrow
* - .btn_icon.__i_play
* Apps:
* - .btn_icon.__i_apple_logo
* - .btn_icon.__i_android_logo
*/
.bm_btn .btn_icon.__i_sb_back_arrow {
width: 22px;
height: 19px;
}
.bm_btn .btn_icon.__i_sb_cam {
width: 19px;
height: 24px;
}
.bm_btn .btn_icon.__i_sb_mobile {
width: 10px;
height: 16px;
}
.bm_btn .btn_icon.__i_cross {
width: 12px;
height: 12px;
}
.bm_btn .btn_icon.__i_back_arrow {
width: 8px;
height: 10px;
}
.bm_btn .btn_icon.__i_play {
width: 8px;
height: 7px;
}
.bm_btn .btn_icon.__i_apple_logo {
width: 13px;
height: 16px;
margin-top: -3px;
}
.bm_btn .btn_icon.__i_android_logo {
width: 14px;
height: 16px;
}
.bm_btn .btn_icon {
flex-shrink: 0;
pointer-events: none;
fill: currentColor;
}
.bm_btn .btn_icon.__left {
margin-right: 8px;
}
.bm_btn .btn_icon.__right {
margin-left: 8px;
}
.bm_btn.__small .btn_icon.__left {
margin-right: 5px;
}
.bm_btn.__small .btn_icon.__right {
margin-left: 5px;
}
.bm_btn.__large .btn_icon.__left {
margin-right: 12px;
}
.bm_btn.__large .btn_icon.__right {
margin-left: 12px;
}
.bm_bwl_wrp {
display: flex;
align-items: center;
}
.bm_btn {
position: relative;
display: inline-flex;
flex-flow: row nowrap;
align-content: center;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 120px;
min-height: 38px;
margin: 0;
padding: 3px 30px;
color: #353c46;
font: normal 700 13px/1.2 "Open Sans", sans-serif;
text-align: center;
text-decoration: none;
vertical-align: middle;
background: #fff;
border: 0;
border-radius: 50px;
outline: none;
cursor: pointer;
user-select: none;
/* inner left */
/* inner center - need for override */
/* inner right */
/*
* Fix old IOS devices bug, when flex button can't do justify-content: center
* https://crab.media/browse/BGM-3083
* https://css-live.ru/articles/brauzernye-bagi-flexbox.html#9-button-elements-cant-be-flex-containers *
*/
}
.bm_btn:active, .bm_btn.__active {
color: #353c46;
text-decoration: none;
background: #f2f5f9;
}
.bm_btn:hover, .bm_btn.__hover {
color: #353c46;
text-decoration: none;
background: #f2f5f9;
}
.bm_btn:disabled, .bm_btn.__disabled {
color: #353c46;
background: rgb(193.7519623234, 193.7519623234, 193.7519623234);
cursor: default;
pointer-events: none;
}
.bm_btn.__small {
min-width: 90px;
min-height: 28px;
padding: 0 15px;
font-weight: 600;
}
.bm_btn.__large {
min-width: 200px;
min-height: 54px;
padding: 5px 20px;
text-transform: uppercase;
}
.bm_btn.__w_small {
min-width: 100px;
}
.bm_btn.__w_normal {
min-width: 120px;
}
.bm_btn.__w_medium {
min-width: 150px;
}
.bm_btn.__w_large {
min-width: 226px;
}
.bm_btn.__w_full {
min-width: 100%;
}
.bm_btn.__thin {
font-weight: 300;
}
.bm_btn.__regular {
font-weight: 400;
}
.bm_btn.__semi_bold {
font-weight: 600;
}
.bm_btn.__inner_left {
justify-content: flex-start;
text-align: left;
}
.bm_btn.__inner_center {
justify-content: center;
text-align: center;
}
.bm_btn.__inner_right {
justify-content: flex-end;
text-align: right;
}
.bm_btn.__fl_gr {
flex-grow: 1;
}
.bm_btn .bmb_inner {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
}
.bm_btn .bmb_status {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
background-color: inherit;
border-radius: inherit;
}
.bm_btn .btn_loader {
position: relative;
display: inline-block;
flex-shrink: 0;
box-sizing: border-box;
width: 24px;
height: 24px;
color: inherit;
vertical-align: middle;
animation: button_loader 0.9s cubic-bezier(0.72, 0.51, 0.43, 0.67) infinite;
stroke: transparent;
}
.bm_dummy_button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: none;
border: none;
outline: none;
cursor: pointer;
user-select: none;
}
.bm_dummy_button:disabled, .bm_dummy_button.__disabled {
color: #353c46;
background: rgb(193.7519623234, 193.7519623234, 193.7519623234);
cursor: default;
pointer-events: none;
}
.bm_dummy_button .bmb_inner {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
}
@keyframes button_loader {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/**
* Default button
* - class .bm_btn.__btn_default
* - button with --white-color background color and border
*/
.bm_btn.__btn_default {
color: #2a96e2;
background: #fff;
border: 1px solid #e8ebed;
}
.bm_btn.__btn_default:active, .bm_btn.__btn_default.__active {
color: #2a96e2;
background: #fff;
border-color: #2a96e2;
}
.bm_btn.__btn_default:disabled, .bm_btn.__btn_default.__disabled {
color: #76bde2;
background: #fff;
border-color: #e8ebed;
}
@media (hover: hover) {
.bm_btn.__btn_default:hover, .bm_btn.__btn_default.__hover {
color: #2a96e2;
background: #fff;
border-color: #2a96e2;
}
}
/**
* Primary button
* - class .bm_btn.__btn_primary
* - button with --accent-primary background color
*/
.bm_btn.__btn_primary {
color: #fff;
background: #2a96e2;
}
.bm_btn.__btn_primary:active, .bm_btn.__btn_primary.__active {
color: #fff;
background: #0d71ba;
}
.bm_btn.__btn_primary:disabled, .bm_btn.__btn_primary.__disabled {
color: #fff;
background: #68a0c8;
}
@media (hover: hover) {
.bm_btn.__btn_primary:hover, .bm_btn.__btn_primary.__hover {
color: #fff;
background: #0d71ba;
}
}
/**
* Secondary button - used for studio
* - class .bm_btn.__btn_secondary
* - button with --accent-primary-bg color and light blue hovers
*/
.bm_btn.__btn_secondary {
color: #fff;
background: #2a96e2;
}
.bm_btn.__btn_secondary:active, .bm_btn.__btn_secondary.__active {
color: #fff;
background: #40a7f0;
}
.bm_btn.__btn_secondary:disabled, .bm_btn.__btn_secondary.__disabled {
color: #fff;
background: #8dc6ee;
}
@media (hover: hover) {
.bm_btn.__btn_secondary:hover, .bm_btn.__btn_secondary.__hover {
color: #fff;
background: #40a7f0;
}
}
/**
* Third button - used for translator settings tooltip
* - class .bm_btn.__btn_third
* - button with --accent-extra-gray color
*/
.bm_btn.__btn_third {
color: #606771;
background: #fff;
border: 1px solid #e8ebed;
}
.bm_btn.__btn_third:active, .bm_btn.__btn_third.__active {
color: #606771;
background: #fff;
border-color: #9ba2ac;
}
.bm_btn.__btn_third:disabled, .bm_btn.__btn_third.__disabled {
color: #9ba2ac;
background: #fff;
border-color: #e8ebed;
}
@media (hover: hover) {
.bm_btn.__btn_third:hover, .bm_btn.__btn_third.__hover {
color: #606771;
background: #fff;
border-color: #9ba2ac;
}
}
/**
* Success button
* - class .bm_btn.__btn_success
* - button with --btn-success-color background color
*/
.bm_btn.__btn_success {
color: #fff;
background: #17ae45;
}
.bm_btn.__btn_success:active, .bm_btn.__btn_success.__active {
color: #fff;
background: #28c358;
}
.bm_btn.__btn_success:disabled, .bm_btn.__btn_success.__disabled {
color: #fff;
background: #8fc9a1;
}
@media (hover: hover) {
.bm_btn.__btn_success:hover, .bm_btn.__btn_success.__hover {
color: #fff;
background: #28c358;
}
}
/**
* Brand button
* - class .bm_btn.__btn_brand
* - button with --access-brand-color background color
*/
.bm_btn.__btn_brand {
color: #fff;
background: #6b133b;
}
.bm_btn.__btn_brand:active, .bm_btn.__btn_brand.__active {
color: #fff;
background: #7c224b;
}
.bm_btn.__btn_brand:disabled, .bm_btn.__btn_brand.__disabled {
color: #fff;
background: #995f79;
}
@media (hover: hover) {
.bm_btn.__btn_brand:hover, .bm_btn.__btn_brand.__hover {
color: #fff;
background: #7c224b;
}
}
/**
* Clear button
* - class .bm_btn.__btn_clear
* - button with transparent bg and --access-brand-color color
*/
.bm_btn.__btn_clear {
color: #2a96e2;
background: transparent;
border: 1px solid #c7dee4;
}
.bm_btn.__btn_clear:active, .bm_btn.__btn_clear.__active {
color: #2a96e2;
background: transparent;
border-color: #2a96e2;
}
.bm_btn.__btn_clear:disabled, .bm_btn.__btn_clear.__disabled {
color: #76bde2;
background: transparent;
border-color: #c7dee4;
}
@media (hover: hover) {
.bm_btn.__btn_clear:hover, .bm_btn.__btn_clear.__hover {
color: #2a96e2;
background: transparent;
border-color: #2a96e2;
}
}
/**
* Light button
* - class .bm_btn.__btn_light
* - button with --access-brand-color background color
*/
.bm_btn.__btn_light {
color: #9ba2ac;
background: #f7f7f8;
}
.bm_btn.__btn_light:active, .bm_btn.__btn_light.__active {
color: #606771;
background: #e4e4e7;
}
.bm_btn.__btn_light:disabled, .bm_btn.__btn_light.__disabled {
background: #f7f7f8;
}
@media (hover: hover) {
.bm_btn.__btn_light:hover, .bm_btn.__btn_light.__hover {
color: #606771;
background: #e4e4e7;
}
}
/**
* Forms
*
* @prefix:
* - bmf_ = bm_form
*
*/
/**
/**
* Form grid
*
* @prefix:
* - bmf_ = bm_form
* - bmfn_ = bmf_note
*
* Modifiers:
* .bm_form.__has_bg - form container has content background
* .bm_form.__c_inline - inline label and input for all form rows
* .bm_form.__c_inline.__fc_low - form_control all form rows
* .bm_form.__sticky_actions - relative container for sticky actions block
* .bmf_row.__inline - inline label and input for one row only
* .bmf_row.__wide - with 100% width bmf_input_wrp
* .bmf_row.__wat - wide and tall. bmf_input_wrp and .form_control with 100% height 100%
* .bmf_row.__no_errors - no errors in bmf_input_wrp
* .bmf_row.__dz_column - added if file upload items are placed in a column
* .bmf_row.__dz_line - added if file upload items are placed in a line
* .bmf_row.__fr_low - low height of input
* .bmf_row.__copy - for row with copy button
* .bmf_row.__sensitive_agreement - for row with sensitive agreement checkbox
* .bmf_row.__radio - for radio buttons in a row
* .bmf_input_wrp.__error - to style error messages
* .bmf_input_wrp.__scroll_visible - with visible scroll panel in textarea
* .bmf_input_wrp.__smiley - with smile icon in textarea
* .bmf_input_wrp.__auto_height - to drop the minimum height
* .bmf_input_wrp.__focused - focused input
* .bmf_note.__error - defines error block
* .bmfn_box.__m_top - defines top indent
* .bmfn_box.__m_bottom - defines bottom indent
* .bmf_block.__accent - with another background color
* .bmf_block.__clear - with no border
* .bmf_block.__tight - with no vertical paddings
* .bmf_block.__no_pt - with no top paddings
* .bmf_block.__no_pb - with no bottom paddings
* .bmf_block.__no_m - with no margin
* .bmf_block.__mt - with margin-top
* .bm_btn.__btn_copy - for copy button, (children .bmf_row.__copy)
*
* Usage example:
*
*
*/
.bm_form {
box-sizing: border-box;
}
.bm_form.__sticky_actions {
position: relative;
}
.bm_form.__has_bg {
background-color: #fff;
}
.bm_form * {
box-sizing: border-box;
}
.bm_form .bmf_error {
display: block;
margin-bottom: 10px;
color: #e50000;
font-size: 11px;
line-height: 13px;
}
.bm_form .bmf_note {
display: block;
margin: 2px 0;
padding-left: 16px;
color: #606771;
font-size: 11px;
line-height: 13px;
}
.bm_form .bmf_note.__error {
color: #e50000;
}
.bm_form .bmf_note .bmfn_box {
display: block;
margin: 2px 0;
}
.bm_form .bmf_note .bmfn_box:last-child {
margin-bottom: 0;
}
.bm_form .bmf_note .bmfn_box.__m_top {
margin-top: 6px;
}
.bm_form .bmf_note .bmfn_box.__m_bottom {
margin-bottom: 6px;
}
.bm_form .bmf_note .bmfn_new {
width: 22px;
height: 11px;
margin-top: -2px;
margin-right: 4px;
}
.bm_form.__f_inline.__fc_low .bmf_label_wrp {
min-height: 34px;
}
.bm_form.__f_inline.__fc_low .bmf_input_wrp {
min-height: 34px;
}
.bm_form.__f_inline .bmf_row {
display: flex;
}
.bm_form.__f_inline .bmf_label_wrp {
display: flex;
flex: 0 0 160px;
align-items: center;
align-self: flex-start;
min-height: 38px;
padding-right: 15px;
}
.bm_form.__f_inline .bmf_input_wrp {
width: 100%;
min-height: 38px;
padding-bottom: 0;
}
.bm_form.__f_inline .bmf_file {
margin-top: 5px;
}
.bmf_row.__inline {
display: flex;
}
.bmf_row.__inline .bmf_label_wrp {
display: flex;
flex: 0 0 160px;
align-items: center;
align-self: flex-start;
min-height: 38px;
padding-right: 15px;
}
.bmf_row.__inline .bmf_input_wrp {
width: 100%;
min-height: 38px;
padding-bottom: 0;
}
.bmf_row.__inline .bmf_file {
margin-top: 5px;
}
.bmf_row.__checkbox .bmf_input_wrp {
min-height: 0;
}
.bmf_row.__radio {
padding-bottom: 20px;
}
.bmf_row.__wide .bmf_input_wrp {
max-width: 100%;
}
.bmf_row.__wat {
height: 100%;
}
.bmf_row.__wat .bmf_input_block {
height: 100%;
}
.bmf_row.__wat .bmf_input_wrp {
max-width: 100%;
height: 100%;
}
.bmf_row.__wat .bmf_control {
height: 100%;
}
.bmf_row.__no_errors .bmf_input_wrp {
min-height: 38px;
padding-bottom: 0;
}
.bmf_row.__dz_line .bmf_input_wrp {
min-height: 47px;
margin-bottom: 0;
}
.bmf_row.__dz_column .bmf_input_wrp {
min-height: 92px;
margin-bottom: 0;
}
.bmf_row.__dz_column .dcf_row_content {
flex-direction: column;
align-items: flex-start;
}
.bmf_row.__dz_column .dcf_row_content .dcf_btn_wrap {
margin-bottom: 0;
}
.bmf_row.__dz_column .dcf_row_content .dcf_file_particle {
margin-bottom: 2px;
}
.bmf_row.__hover .bmf_selectbox .bmsb_arrow {
fill: #2a96e2;
}
.bmf_row.__focused .bmf_selectbox .bmsb_arrow {
transform: rotate(-180deg);
fill: #2a96e2;
}
.bmf_row.__fr_low.__inline .bmf_label_wrp {
min-height: 34px;
}
.bmf_row.__fr_low.__inline .bmf_input_wrp {
min-height: 34px;
}
.bmf_row.__fr_low.__no_errors .bmf_input_wrp {
min-height: 34px;
}
.bmf_row.__fr_low .bmf_input_block {
min-height: 34px;
padding: 7px 17px 9px;
}
.bmf_row.__copy .bmf_input_block {
position: relative;
}
.bmf_row.__copy .bmf_input_block:hover {
background-color: #ececee;
}
.bmf_row.__copy .bmf_input_block:hover .bm_btn.__btn_copy {
visibility: visible;
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.bmf_row.__copy .bmf_input_block .bm_btn.__btn_copy {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.bmf_row.__sensitive_agreement {
padding: 0 0 22px;
}
.bmf_row.__sensitive_agreement .bmf_input_wrp {
max-width: none;
padding-bottom: 0;
}
.bmf_row.__sensitive_agreement .bmf_input_wrp a {
pointer-events: auto;
}
.bmf_row.__sensitive_agreement .bmf_input_wrp .bmf_note {
position: absolute;
top: 100%;
left: 0;
}
.bmf_label_wrp {
margin-bottom: 6px;
}
.bmf_textarea_wrp {
box-sizing: border-box;
height: 85px;
padding: 13px 17px 16px;
background: #f7f7f8;
border-radius: 20px;
}
.bmf_group .bmf_input_wrp {
min-height: 58px;
}
.bmf_group .bmf_row.__radio .bmf_input_wrp {
gap: 24px;
min-height: auto;
padding-bottom: 12px;
}
.bmf_input_wrp {
position: relative;
max-width: 330px;
min-height: 72px; /* additional height for show errors */
padding-bottom: 2px;
}
.bmf_input_wrp.__full {
max-width: none;
}
.bmf_input_wrp.__disabled .bmf_control {
color: #9ba2ac;
-webkit-text-fill-color: #9ba2ac;
}
.bmf_input_wrp.__scroll_visible .bm_smiles {
top: 47px;
right: 30px;
}
.bmf_input_wrp.__smiley .tarea_scroll > .bms_wrp {
padding: 0 50px 0 0;
}
.bmf_input_wrp.__focused .bmf_counter {
display: block;
}
.bmf_input_wrp.__auto_height {
min-height: 0;
}
.bmf_input_wrp.__textarea .bmf_input_block {
padding: 0;
background: none;
border-radius: 0;
}
.bmf_input_wrp .bmsb_input, .bmf_input_wrp .bmf_control {
text-overflow: ellipsis;
}
.bmf_input_wrp .bm_smiles {
position: absolute;
top: 51px;
right: 10px;
z-index: 1;
}
.bmf_input_wrp .bm_dropzone {
min-height: auto;
}
.bmf_input_wrp .bmf_counter {
display: none;
}
.bmf_input_block {
box-sizing: border-box;
min-height: 38px;
padding: 9px 17px 11px;
background-color: #f7f7f8;
border-radius: 20px;
}
.bmf_actions {
position: relative;
display: flex;
align-items: center;
}
.bmf_actions .bm_simple_loader {
margin-right: 10px;
}
.bmf_actions .fa_wrp {
/** need for fix IE bug @see: BGM-3502 */
flex: 1 1 auto;
}
.bmf_actions .bm_btn {
/* TODO: need refactoring */
margin-right: 10px;
}
.bmf_actions .bm_btn.__no_m {
margin: 0;
}
.bmf_actions .bm_btn.__left {
margin: 0 auto 0 0;
}
.bmf_actions .bm_btn.__right {
margin: 0 0 0 auto;
}
.bmf_actions .bmf_subtitle {
padding: 0;
}
.bmf_actions .bmta_protected {
width: 22px;
height: 22px;
margin-left: 10px;
background: #f7f7f8;
}
.bmf_actions .bmta_protected .ui_icon_lock {
width: 8px;
height: 11px;
}
.bmf_actions .bm_alert.__form_alert {
margin: 0 10px 0 0;
padding: 0;
}
.bmf_actions .bm_alert.__form_alert .bm_alert_icon {
margin: 0;
}
.bmf_subtitle {
padding-bottom: 16px;
color: #81003a;
font-weight: 700;
font-size: 18px;
/**
* For centering help icon add for wrp div add .bm_flex.__ai_c
*/
}
.bmf_subtitle.__no_pb {
padding-bottom: 0;
}
.bmf_subtitle .bm_help_wrp {
position: relative;
display: inline-flex;
margin-left: 10px;
}
.bmf_subtitle .bm_tooltip_wrp {
display: inline-flex;
margin-left: 10px;
}
.bmf_subtitle .bm_tooltip_wrp .bm_help_wrp {
margin-left: 0;
}
.bmf_desc {
padding-bottom: 18px;
}
.bmf_desc p {
padding-bottom: 6px;
}
.bmf_desc strong {
font-weight: 700;
}
.bmf_block {
padding: 22px 30px;
}
.bmf_block:not(:first-child), .bmf_block.__actions {
border-top: 1px solid #e6eaed;
}
.bmf_block.__clear {
border: 0;
}
.bmf_block.__tight {
padding-top: 0;
padding-bottom: 0;
}
.bmf_block.__no_m {
margin: 0;
}
.bmf_block.__no_pt {
padding-top: 0;
}
.bmf_block.__no_pb {
padding-bottom: 0;
}
.bmf_block.__no_p {
padding: 0;
}
.bmf_block.__has_bg {
background-color: #fff;
}
.bmf_block.__accent {
background: #ecfafd;
border-color: #d6eaef;
}
.bmf_block.__mt {
margin-top: 20px;
}
.bmf_required {
display: inline-block;
}
.bmf_required:before {
content: "*";
padding-right: 4px;
color: #2a96e2;
}
/**
* Form labels
*
* Usage example:
*
* Display Name
*
*
* Modifiers:
*
* .bmf_label.__required - for required field
* .bmf_label.__accent - for label as title field
*
*/
.bmf_label {
display: flex;
min-height: 20px;
color: #353c46;
font-weight: 700;
font-size: 14px;
line-height: normal;
}
.bmf_label.__inline {
display: inline-flex;
margin: 0 10px 0 0;
}
.bmf_label.__inline > span {
/* if inner translation wrapped up span */
display: inline-flex;
}
.bmf_label.__required:before {
content: "*";
padding-right: 4px;
color: #2a96e2;
}
.bmf_label.__accent {
margin: 0 0 15px;
color: #81003a;
font-size: 18px;
}
.bmf_label > span {
/* if inner translation wrapped up span */
display: flex;
align-items: center;
}
.bmf_label .bmf_label_inner {
display: flex;
align-items: center;
}
.bmf_label .bm_help_wrp {
display: inline-block;
height: 20px;
margin: 0 8px; /* margin for right and left for centering tooltip */
vertical-align: bottom;
}
/**
* Component for choices form types (e.g. registration)
*
*/
.bmf_choices {
box-sizing: border-box;
padding: 2px;
background-color: #fff;
border: 1px solid #e8ebed;
border-radius: 50px;
}
.bmf_choices .bmf_choice {
position: relative;
height: 32px;
padding: 0 25px;
color: #606771;
font-weight: 700;
font-size: 14px;
line-height: 32px;
border-radius: 18px;
cursor: pointer;
transition: color, background-color 0.3s;
}
.bmf_choices .bmf_choice:hover {
color: #000;
}
.bmf_choices .bmf_choice + .bmf_choice:before {
content: "";
position: absolute;
top: calc(50% - 9px);
left: 0;
display: block;
width: 1px;
height: 18px;
background-color: #e8ebed;
}
.bmf_choices .bmf_choice.__active {
color: #fff;
background-color: #2a96e2;
cursor: default;
}
.bmf_choices .bmf_choice.__active:before {
display: none;
}
.bmf_choices .bmf_choice.__active:hover {
color: #fff;
}
.bmf_choices .bmf_choice.__active + .bmf_choice:before {
display: none;
}
/**
* Form text inputs
*
* Usage example:
*
* 75 characters left
*
*
*/
.bmf_counter {
display: block;
margin: 2px 0;
padding: 0 16px;
color: #606771;
font-weight: 600;
font-size: 11px;
line-height: 13px;
}
.bmf_counter.__negative {
color: #e50000;
}
/**
* Placeholder
*/
.bmf_control::placeholder {
color: #9ba2ac;
text-overflow: ellipsis;
opacity: 1;
transition: opacity 0.3s ease;
}
.bmf_control.__hide_placeholder::placeholder {
opacity: 0;
}
/**
* Radio button and checkbox
*
* Usage example:
*
* label text
*
*
*
* label text
*
*
* Modifiers:
*
* .bmf_check.__hover - hover state
* .bmf_mark.__radio - mark for radiobutton
* .bmf_mark.__checkbox - mark for checkbox
* .bmf_mark.__light - mark with white background color
* .bmf_mark.__checkbox.__dark - mark for checkbox alternative background
*
*/
.bmf_check {
position: relative;
display: flex;
align-items: center;
break-inside: avoid;
min-height: 20px;
font-size: 13px;
cursor: pointer;
user-select: none;
/* styles when checked */
}
.bmf_check.__hover .bmf_text, .bmf_check:hover .bmf_text {
color: #353c46;
}
.bmf_check.__hover .bmf_mark, .bmf_check:hover .bmf_mark {
background-color: #e4e4e7;
}
.bmf_check.__disabled {
pointer-events: none;
}
.bmf_check.__disabled .bmf_text {
color: #9ba2ac;
}
.bmf_check .bmf_check_input {
position: absolute;
width: 16px;
height: 16px;
opacity: 0;
pointer-events: none;
}
.bmf_check .bmf_text {
display: inline-flex;
align-items: center;
color: #606771;
line-height: 1.2;
transition: color 0.2s;
}
.bmf_check .bmf_mark {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 16px;
height: 16px;
margin: 0 10px 0 0;
background-color: #ececee;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.bmf_check .bmf_mark.__radio:before {
position: relative;
top: 50%;
display: block;
width: 8px;
height: 8px;
margin: -4px auto 0;
background-color: #2a96e2;
border-radius: 50%;
opacity: 0;
transition: opacity 0.2s;
content: "";
}
.bmf_check .bmf_mark.__checkbox {
display: flex;
align-items: center;
justify-content: center;
}
.bmf_check .bmf_mark.__checkbox.__dark {
transition: background-color 0.2s;
}
.bmf_check .bmf_mark.__checkbox.__dark .bmf_icon {
color: #fff;
}
.bmf_check .bmf_mark.__checkbox .bmf_icon {
width: 8px;
height: 6px;
color: #2a96e2;
opacity: 0;
}
.bmf_check .bmf_mark.__light {
background-color: #fff;
}
.bmf_check .bmf_check_input:checked ~ .bmf_text {
color: #353c46;
}
.bmf_check .bmf_check_input:disabled ~ .bmf_text {
color: #9ba2ac;
}
.bmf_check .bmf_check_input:checked ~ .bmf_mark {
background-color: #ececee;
}
.bmf_check .bmf_check_input:checked ~ .bmf_mark.__light {
background-color: #fff;
}
.bmf_check .bmf_check_input:checked ~ .bmf_mark.__radio:before {
opacity: 1;
}
.bmf_check .bmf_check_input:checked ~ .bmf_mark.__checkbox.__dark {
background-color: #81003a;
}
.bmf_check .bmf_check_input:checked ~ .bmf_mark.__checkbox .bmf_icon {
opacity: 1;
}
.bmf_check .bmf_check_input:disabled ~ .bmf_mark {
background-color: #f7f7f8;
}
/**
* File input
*
* Usage example:
*
*
* Choose file
* No file chosen
*
*
*/
.bmf_file {
position: relative;
display: inline-block;
}
.bmf_file .bmf_file_input {
position: absolute;
width: 100%;
height: 28px;
opacity: 0;
pointer-events: none;
}
.bmf_file .bmf_file_note {
display: inline-block;
vertical-align: middle;
}
.bmf_file .bm_btn {
margin-right: 6px;
}
/**
* Color input
*
* @prefix:
* - ci_ = bmf_color_input
*
* Modifiers:
* .bmf_color_input.__opened - opened color picker
*
* Usage example:
*
*/
/*
* Variables for Color Input Component
*/
/* region Marker */
/* endregion Marker */
/*
* Basic styles for Color Input Marker Component
*
* @prefix:
* - ci_ = .bmf_color_input
* - bmf_ = .bm_form
*
* Modifiers:
* .bmf_color_input.__no_value = state of a marker, when there is no value in color input
*/
.bmf_color_input.__no_value .ci_marker {
background: transparent;
border-color: transparent;
}
.bmf_color_input .ci_marker {
position: absolute;
left: 0;
z-index: 1;
box-sizing: border-box;
width: 38px;
height: 38px;
line-height: 36px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
cursor: pointer;
transition: opacity 0.2s;
}
.bmf_color_input .ci_marker:before {
content: "#";
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
user-select: none;
}
.bmf_color_input {
position: relative;
display: flex;
width: 168px;
height: 38px;
padding-right: 35px;
padding-left: 48px;
background-color: #f7f7f8;
border-radius: 20px;
}
.bmf_color_input:hover .ci_arrow {
fill: #2a96e2;
}
.bmf_color_input.__opened {
z-index: 2;
}
.bmf_color_input.__opened .ci_arrow {
transform: rotate(180deg);
fill: #2a96e2;
}
.bmf_color_input .bmf_control {
color: #353c46;
cursor: pointer;
}
.bmf_color_input .ci_arrow {
position: absolute;
top: 6px;
right: 9px;
box-sizing: border-box;
width: 29px;
height: 26px;
padding: 10px;
cursor: pointer;
fill: #9ba2ac;
}
.bmf_color_input .bm_tooltip {
width: 322px;
cursor: default;
}
/**
* Input with icon
*
* Modifiers:
* .bmf_icon_input.__disabled - disabled input
* .bmf_icon.__color - mod for icon which one painting with "color" style
*
* Usage example:
*
*
*
*
*/
.bmf_icon_input {
position: relative;
}
.bmf_icon_input:not(.__disabled) .bmf_input_block.__focused .bmf_icon, .bmf_icon_input:not(.__disabled) .bmf_input_block.__hover .bmf_icon, .bmf_icon_input:not(.__disabled) .bmf_input_block:hover .bmf_icon {
fill: #2a96e2; /* TODO: Need to remake from fill to color (currentColor) */
}
.bmf_icon_input:not(.__disabled) .bmf_input_block.__focused .bmf_icon.__color, .bmf_icon_input:not(.__disabled) .bmf_input_block.__hover .bmf_icon.__color, .bmf_icon_input:not(.__disabled) .bmf_input_block:hover .bmf_icon.__color {
color: #2a96e2;
}
.bmf_icon_input.__disabled .bmf_control {
color: #9ba2ac;
-webkit-text-fill-color: #9ba2ac;
}
.bmf_icon_input.__disabled .bmf_control.__shadow_textarea {
color: transparent;
-webkit-text-fill-color: transparent;
}
.bmf_icon_input.__disabled .bmf_icon_wrp {
cursor: default;
}
.bmf_icon_input.__disabled .bmf_card_icon {
opacity: 0.5;
}
.bmf_icon_input.__icon_left .bmf_icon {
right: auto;
left: 7px;
}
.bmf_icon_input.__icon_left .bmf_icon_wrp {
right: auto;
left: 12px;
}
.bmf_icon_input.__icon_left .bmf_input_block {
padding-right: 17px;
padding-left: 47px;
}
.bmf_icon_input .bmf_input_block {
padding-right: 40px;
}
.bmf_icon_input .bmf_icon_wrp {
position: absolute;
top: 7px;
right: 13px;
cursor: pointer;
}
.bmf_icon_input .bmf_icon_wrp.__highlighted .bmf_icon {
color: #2a96e2;
}
@media (hover: hover) {
.bmf_icon_input .bmf_icon_wrp.__copy:hover .bmf_icon {
color: #2a96e2;
}
}
.bmf_icon_input .bmf_icon_wrp .bm_copy_btn {
display: block;
}
.bmf_icon_input .bmf_icon {
box-sizing: border-box;
width: 24px;
height: 24px;
padding: 4px;
color: #9ba2ac;
transition: all 0.2s;
pointer-events: none; /* To allow tooltip appearance by clicking icon in IE */
fill: #9ba2ac;
}
.bmf_icon_input .bmf_icon.__avatar {
padding: 3px;
}
.bmf_icon_input .dp_wrapper { /* datepicker wrapper */
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 38px;
}
.bmf_icon_input .dp_wrapper.__active .bmf_icon, .bmf_icon_input .dp_wrapper:hover .bmf_icon {
color: #2a96e2;
}
/**
* Multiselect items
*
* @prefix:
* - bmfs_ = .bmf_selected_item
*
* Modifiers:
* .bmf_selected_item.__big_size big size of items (as a style guide)
* .bmf_selected_item.__disabled - mod for disabled item
*
* Usage example:
*
*
*
* {item.label}
*
*/
.bmsb_input_wrp .bmf_selected_wrp {
padding: 5px 0 2px 5px;
}
.bmf_selected_item {
position: relative;
display: inline-flex;
align-items: center;
box-sizing: border-box;
min-height: 27px;
margin-right: 6px;
margin-bottom: 3px;
padding: 0 28px 0 10px;
color: #606771;
font-weight: 600;
line-height: 15px;
white-space: nowrap;
text-align: center;
background-color: #fff;
border: 1px solid #e9ebee;
border-radius: 15px;
user-select: none;
}
.bmf_selected_item.__big_size {
min-height: 38px;
padding: 0 39px 0 14px;
border-radius: 19px;
}
.bmf_selected_item.__big_size .bmfs_remove_item {
right: 4px;
width: 28px;
min-width: 28px;
height: 28px;
margin-left: 10px;
}
.bmf_selected_item .bmfs_remove_item {
position: absolute;
top: 50%;
right: 2px;
width: 21px;
height: 21px;
transform: translateY(-50%);
cursor: pointer;
}
.bmf_selected_item .bmfs_text {
transition: color 0.3s ease;
}
.bmf_selected_item:not(.__disabled):hover .bmfs_text {
color: #353c46;
}
.bmf_selected_item:not(.__disabled):hover .bm_icon_close {
color: #2a96e2;
stroke-opacity: 1;
}
.bmf_selected_item.__disabled {
color: #606771;
pointer-events: none;
}
/**
* Phone select
*
* @prefix:
* - bmsb_ = bmf_selectbox
* - ip_ = bmsb_input_phone
* - ipf = ip_flag
*
* Modifiers:
* .bmf_selectbox.__phone phone select state
*
*/
.bmf_selectbox.__phone {
position: relative;
}
.bmf_selectbox.__phone .bmsb_arrow_wrp:last-child {
display: none;
}
.bmf_selectbox.__phone .bmsb_input_wrp {
padding-right: 10px;
}
.bmf_selectbox.__phone .bmsb_input_wrp.__disabled .ip_flag {
opacity: 0.5;
}
.bmf_selectbox.__phone .bmsb_input_phone {
position: relative;
height: 100%;
padding-left: 20px;
}
.bmf_selectbox.__phone .bmsb_input_phone.__no_select {
cursor: default;
}
.bmf_selectbox.__phone .bmsb_input_phone.__no_select .ip_actions {
margin-right: 5px;
color: #9ba2ac;
line-height: 1.4;
cursor: default;
user-select: none;
pointer-events: none;
}
.bmf_selectbox.__phone .bmsb_input_phone.__empty .bmsb_arrow_wrp {
justify-content: flex-end;
}
.bmf_selectbox.__phone .bmsb_input_phone .bmsb_arrow_wrp {
position: relative;
}
.bmf_selectbox.__phone .bmsb_input_phone .bmsb_input {
padding-right: 0;
}
.bmf_selectbox.__phone .ip_actions {
flex-shrink: 0;
}
.ip_flag {
position: relative;
display: inline-block;
width: 23px;
height: 15px;
margin-right: 10px;
overflow: hidden;
border-radius: 2px;
}
.ip_flag:before, .ip_flag:after {
width: 100%;
height: 100%;
content: "";
}
.ip_flag:before {
display: block;
/* background mover to :before, for redmi fix */
background-image: url("../../../images/bm/sprites/flags/3x2/flags.jpg");
background-repeat: no-repeat;
background-position: 0;
background-size: 100% 3935px;
}
.ip_flag:after {
/* added shadow to :after for redmi fix */
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
content: "";
}
.ip_flag.__hidden {
background-color: #9ba2ac;
}
.ip_flag.__hidden:before, .ip_flag.__hidden:after {
opacity: 0;
}
.ipf_ad:before {
background-position-y: 0;
}
.ipf_ae:before {
background-position-y: -16px;
}
.ipf_af:before {
background-position-y: -32px;
}
.ipf_ag:before {
background-position-y: -48px;
}
.ipf_ai:before {
background-position-y: -64px;
}
.ipf_al:before {
background-position-y: -80px;
}
.ipf_am:before {
background-position-y: -96px;
}
.ipf_an:before {
background-position-y: -112px;
}
.ipf_ao:before {
background-position-y: -128px;
}
.ipf_aq:before {
background-position-y: -144px;
}
.ipf_ar:before {
background-position-y: -160px;
}
.ipf_as:before {
background-position-y: -176px;
}
.ipf_at:before {
background-position-y: -192px;
}
.ipf_au:before {
background-position-y: -208px;
}
.ipf_aw:before {
background-position-y: -224px;
}
.ipf_ax:before {
background-position-y: -240px;
}
.ipf_az:before {
background-position-y: -256px;
}
.ipf_ba:before {
background-position-y: -272px;
}
.ipf_bb:before {
background-position-y: -288px;
}
.ipf_bd:before {
background-position-y: -304px;
}
.ipf_be:before {
background-position-y: -320px;
}
.ipf_bf:before {
background-position-y: -336px;
}
.ipf_bg:before {
background-position-y: -352px;
}
.ipf_bh:before {
background-position-y: -368px;
}
.ipf_bi:before {
background-position-y: -384px;
}
.ipf_bj:before {
background-position-y: -400px;
}
.ipf_bl:before {
background-position-y: -416px;
}
.ipf_bm:before {
background-position-y: -432px;
}
.ipf_bn:before {
background-position-y: -448px;
}
.ipf_bo:before {
background-position-y: -464px;
}
.ipf_bq:before {
background-position-y: -480px;
}
.ipf_br:before {
background-position-y: -496px;
}
.ipf_bs:before {
background-position-y: -512px;
}
.ipf_bt:before {
background-position-y: -528px;
}
.ipf_bv:before {
background-position-y: -544px;
}
.ipf_bw:before {
background-position-y: -560px;
}
.ipf_by:before {
background-position-y: -576px;
}
.ipf_bz:before {
background-position-y: -592px;
}
.ipf_ca:before {
background-position-y: -608px;
}
.ipf_cc:before {
background-position-y: -624px;
}
.ipf_cd:before {
background-position-y: -640px;
}
.ipf_cf:before {
background-position-y: -656px;
}
.ipf_cg:before {
background-position-y: -672px;
}
.ipf_ch:before {
background-position-y: -688px;
}
.ipf_ci:before {
background-position-y: -704px;
}
.ipf_ck:before {
background-position-y: -720px;
}
.ipf_cl:before {
background-position-y: -736px;
}
.ipf_cm:before {
background-position-y: -752px;
}
.ipf_cn:before {
background-position-y: -768px;
}
.ipf_co:before {
background-position-y: -784px;
}
.ipf_cr:before {
background-position-y: -800px;
}
.ipf_cv:before {
background-position-y: -816px;
}
.ipf_cw:before {
background-position-y: -832px;
}
.ipf_cx:before {
background-position-y: -848px;
}
.ipf_cy:before {
background-position-y: -864px;
}
.ipf_cz:before {
background-position-y: -880px;
}
.ipf_de:before {
background-position-y: -896px;
}
.ipf_dj:before {
background-position-y: -912px;
}
.ipf_dk:before {
background-position-y: -928px;
}
.ipf_dm:before {
background-position-y: -944px;
}
.ipf_do:before {
background-position-y: -960px;
}
.ipf_dz:before {
background-position-y: -976px;
}
.ipf_ec:before {
background-position-y: -992px;
}
.ipf_ee:before {
background-position-y: -1008px;
}
.ipf_eg:before {
background-position-y: -1024px;
}
.ipf_eh:before {
background-position-y: -1040px;
}
.ipf_er:before {
background-position-y: -1056px;
}
.ipf_es:before {
background-position-y: -1072px;
}
.ipf_et:before {
background-position-y: -1088px;
}
.ipf_fi:before {
background-position-y: -1104px;
}
.ipf_fj:before {
background-position-y: -1120px;
}
.ipf_fk:before {
background-position-y: -1136px;
}
.ipf_fm:before {
background-position-y: -1152px;
}
.ipf_fo:before {
background-position-y: -1168px;
}
.ipf_fr:before {
background-position-y: -1184px;
}
.ipf_ga:before {
background-position-y: -1200px;
}
.ipf_gb:before {
background-position-y: -1216px;
}
.ipf_gd:before {
background-position-y: -1232px;
}
.ipf_ge:before {
background-position-y: -1248px;
}
.ipf_gf:before {
background-position-y: -1264px;
}
.ipf_gg:before {
background-position-y: -1280px;
}
.ipf_gh:before {
background-position-y: -1296px;
}
.ipf_gi:before {
background-position-y: -1312px;
}
.ipf_gl:before {
background-position-y: -1328px;
}
.ipf_gm:before {
background-position-y: -1344px;
}
.ipf_gn:before {
background-position-y: -1360px;
}
.ipf_gp:before {
background-position-y: -1376px;
}
.ipf_gq:before {
background-position-y: -1392px;
}
.ipf_gr:before {
background-position-y: -1408px;
}
.ipf_gs:before {
background-position-y: -1424px;
}
.ipf_gt:before {
background-position-y: -1440px;
}
.ipf_gu:before {
background-position-y: -1456px;
}
.ipf_gw:before {
background-position-y: -1472px;
}
.ipf_gy:before {
background-position-y: -1488px;
}
.ipf_hk:before {
background-position-y: -1504px;
}
.ipf_hm:before {
background-position-y: -1520px;
}
.ipf_hn:before {
background-position-y: -1536px;
}
.ipf_hr:before {
background-position-y: -1552px;
}
.ipf_ht:before {
background-position-y: -1568px;
}
.ipf_hu:before {
background-position-y: -1584px;
}
.ipf_id:before {
background-position-y: -1600px;
}
.ipf_ie:before {
background-position-y: -1616px;
}
.ipf_il:before {
background-position-y: -1632px;
}
.ipf_im:before {
background-position-y: -1648px;
}
.ipf_in:before {
background-position-y: -1664px;
}
.ipf_io:before {
background-position-y: -1680px;
}
.ipf_iq:before {
background-position-y: -1696px;
}
.ipf_is:before {
background-position-y: -1712px;
}
.ipf_it:before {
background-position-y: -1728px;
}
.ipf_je:before {
background-position-y: -1744px;
}
.ipf_jm:before {
background-position-y: -1760px;
}
.ipf_jo:before {
background-position-y: -1776px;
}
.ipf_jp:before {
background-position-y: -1792px;
}
.ipf_ke:before {
background-position-y: -1808px;
}
.ipf_kg:before {
background-position-y: -1824px;
}
.ipf_kh:before {
background-position-y: -1840px;
}
.ipf_ki:before {
background-position-y: -1856px;
}
.ipf_km:before {
background-position-y: -1872px;
}
.ipf_kn:before {
background-position-y: -1888px;
}
.ipf_kr:before {
background-position-y: -1904px;
}
.ipf_kw:before {
background-position-y: -1920px;
}
.ipf_ky:before {
background-position-y: -1936px;
}
.ipf_kz:before {
background-position-y: -1952px;
}
.ipf_la:before {
background-position-y: -1968px;
}
.ipf_lb:before {
background-position-y: -1984px;
}
.ipf_lc:before {
background-position-y: -2000px;
}
.ipf_li:before {
background-position-y: -2016px;
}
.ipf_lk:before {
background-position-y: -2032px;
}
.ipf_lr:before {
background-position-y: -2048px;
}
.ipf_ls:before {
background-position-y: -2064px;
}
.ipf_lt:before {
background-position-y: -2080px;
}
.ipf_lu:before {
background-position-y: -2096px;
}
.ipf_lv:before {
background-position-y: -2112px;
}
.ipf_ly:before {
background-position-y: -2128px;
}
.ipf_ma:before {
background-position-y: -2144px;
}
.ipf_mc:before {
background-position-y: -2160px;
}
.ipf_md:before {
background-position-y: -2176px;
}
.ipf_me:before {
background-position-y: -2192px;
}
.ipf_mf:before {
background-position-y: -2208px;
}
.ipf_mg:before {
background-position-y: -2224px;
}
.ipf_mh:before {
background-position-y: -2240px;
}
.ipf_mk:before {
background-position-y: -2256px;
}
.ipf_ml:before {
background-position-y: -2272px;
}
.ipf_mm:before {
background-position-y: -2288px;
}
.ipf_mn:before {
background-position-y: -2304px;
}
.ipf_mo:before {
background-position-y: -2320px;
}
.ipf_mp:before {
background-position-y: -2336px;
}
.ipf_mq:before {
background-position-y: -2352px;
}
.ipf_mr:before {
background-position-y: -2368px;
}
.ipf_ms:before {
background-position-y: -2384px;
}
.ipf_mt:before {
background-position-y: -2400px;
}
.ipf_mu:before {
background-position-y: -2416px;
}
.ipf_mv:before {
background-position-y: -2432px;
}
.ipf_mw:before {
background-position-y: -2448px;
}
.ipf_mx:before {
background-position-y: -2464px;
}
.ipf_my:before {
background-position-y: -2480px;
}
.ipf_mz:before {
background-position-y: -2496px;
}
.ipf_na:before {
background-position-y: -2512px;
}
.ipf_nc:before {
background-position-y: -2528px;
}
.ipf_ne:before {
background-position-y: -2544px;
}
.ipf_nf:before {
background-position-y: -2560px;
}
.ipf_ng:before {
background-position-y: -2576px;
}
.ipf_ni:before {
background-position-y: -2592px;
}
.ipf_nl:before {
background-position-y: -2608px;
}
.ipf_no:before {
background-position-y: -2624px;
}
.ipf_np:before {
background-position-y: -2640px;
}
.ipf_nr:before {
background-position-y: -2656px;
}
.ipf_nu:before {
background-position-y: -2672px;
}
.ipf_nz:before {
background-position-y: -2688px;
}
.ipf_om:before {
background-position-y: -2704px;
}
.ipf_pa:before {
background-position-y: -2720px;
}
.ipf_pe:before {
background-position-y: -2736px;
}
.ipf_pf:before {
background-position-y: -2752px;
}
.ipf_pg:before {
background-position-y: -2768px;
}
.ipf_ph:before {
background-position-y: -2784px;
}
.ipf_pk:before {
background-position-y: -2800px;
}
.ipf_pl:before {
background-position-y: -2816px;
}
.ipf_pm:before {
background-position-y: -2832px;
}
.ipf_pn:before {
background-position-y: -2848px;
}
.ipf_pr:before {
background-position-y: -2864px;
}
.ipf_ps:before {
background-position-y: -2880px;
}
.ipf_pt:before {
background-position-y: -2896px;
}
.ipf_pw:before {
background-position-y: -2912px;
}
.ipf_py:before {
background-position-y: -2928px;
}
.ipf_qa:before {
background-position-y: -2944px;
}
.ipf_re:before {
background-position-y: -2960px;
}
.ipf_ro:before {
background-position-y: -2976px;
}
.ipf_rs:before {
background-position-y: -2992px;
}
.ipf_ru:before {
background-position-y: -3008px;
}
.ipf_rw:before {
background-position-y: -3024px;
}
.ipf_sa:before {
background-position-y: -3040px;
}
.ipf_sb:before {
background-position-y: -3056px;
}
.ipf_sc:before {
background-position-y: -3072px;
}
.ipf_se:before {
background-position-y: -3088px;
}
.ipf_sg:before {
background-position-y: -3104px;
}
.ipf_sh:before {
background-position-y: -3120px;
}
.ipf_si:before {
background-position-y: -3136px;
}
.ipf_sj:before {
background-position-y: -3152px;
}
.ipf_sk:before {
background-position-y: -3168px;
}
.ipf_sl:before {
background-position-y: -3184px;
}
.ipf_sm:before {
background-position-y: -3200px;
}
.ipf_sn:before {
background-position-y: -3216px;
}
.ipf_so:before {
background-position-y: -3232px;
}
.ipf_sr:before {
background-position-y: -3248px;
}
.ipf_ss:before {
background-position-y: -3264px;
}
.ipf_st:before {
background-position-y: -3280px;
}
.ipf_sv:before {
background-position-y: -3296px;
}
.ipf_sx:before {
background-position-y: -3312px;
}
.ipf_sz:before {
background-position-y: -3328px;
}
.ipf_tc:before {
background-position-y: -3344px;
}
.ipf_td:before {
background-position-y: -3360px;
}
.ipf_tf:before {
background-position-y: -3376px;
}
.ipf_tg:before {
background-position-y: -3392px;
}
.ipf_th:before {
background-position-y: -3408px;
}
.ipf_tj:before {
background-position-y: -3424px;
}
.ipf_tk:before {
background-position-y: -3440px;
}
.ipf_tl:before {
background-position-y: -3456px;
}
.ipf_tm:before {
background-position-y: -3472px;
}
.ipf_tn:before {
background-position-y: -3488px;
}
.ipf_to:before {
background-position-y: -3504px;
}
.ipf_tr:before {
background-position-y: -3520px;
}
.ipf_tt:before {
background-position-y: -3536px;
}
.ipf_tv:before {
background-position-y: -3552px;
}
.ipf_tw:before {
background-position-y: -3568px;
}
.ipf_tz:before {
background-position-y: -3584px;
}
.ipf_ua:before {
background-position-y: -3600px;
}
.ipf_ug:before {
background-position-y: -3616px;
}
.ipf_um:before {
background-position-y: -3632px;
}
.ipf_us:before {
background-position-y: -3648px;
}
.ipf_uy:before {
background-position-y: -3664px;
}
.ipf_uz:before {
background-position-y: -3680px;
}
.ipf_va:before {
background-position-y: -3696px;
}
.ipf_vc:before {
background-position-y: -3712px;
}
.ipf_ve:before {
background-position-y: -3728px;
}
.ipf_vg:before {
background-position-y: -3744px;
}
.ipf_vi:before {
background-position-y: -3760px;
}
.ipf_vn:before {
background-position-y: -3776px;
}
.ipf_vu:before {
background-position-y: -3792px;
}
.ipf_wf:before {
background-position-y: -3808px;
}
.ipf_ws:before {
background-position-y: -3824px;
}
.ipf_xk:before {
background-position-y: -3840px;
}
.ipf_ye:before {
background-position-y: -3856px;
}
.ipf_yt:before {
background-position-y: -3872px;
}
.ipf_za:before {
background-position-y: -3888px;
}
.ipf_zm:before {
background-position-y: -3904px;
}
.ipf_zw:before {
background-position-y: -3920px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ip_flag:before {
background-image: url("../../../images/bm/sprites/flags/3x2/flags_2x.jpg");
}
}
/**
* Form range row
*
* Usage example:
*
*
*
*
*
*/
.form_range_row {
padding: 0 30px;
border-bottom: 1px solid #e6eaed;
}
.form_range_row .frr_choice {
display: flex;
min-width: 140px;
}
.form_range_row .frr_range {
display: flex;
flex-grow: 1;
}
.form_range_row .frr_range .bm_range {
width: 100%;
margin: 0;
}
.form_range_row .frr_range .bm_range .bmrg_selected_edge {
font-size: 11px;
}
/*
* Actions bar
*
* Modifiers:
* bmf_actions_bar.__overlapped - mod when actions bar overlaps all other floated elements
*/
.bm_form .bmf_actions_bar {
position: sticky;
bottom: 0;
z-index: 4;
background: #fff;
}
.bm_form .bmf_actions_bar.__overlapped {
z-index: 611;
}
/**
* Grid system
*
* @prefix:
* - bmc_ = bm_container
*
* Modifiers:
* .bmc_row.__no_gutters - to remove gutters from row and its columns
* .bm_container_fluid.__no_p - no paddings
*
* Usage example:
*
*
*
* column content
*
*
* column content
*
*
*
*
* Modifiers:
* .bm_placeholder.__small - with small icon
* .bm_placeholder.__image - with image icon
* .bm_placeholder.__image_cross - with image icon with cross
* .bm_placeholder.__no_bg - without bg color and icon
* .bm_placeholder.__video - with video icon
* .bm_placeholder.__news - with news icon (The template includes a built-in style: background image)
* .bm_placeholder.__news.__n_bg - news without preview
*/
.bm_placeholder {
position: relative;
display: block;
background: #f7f7f8 50% 50%/48px 40px no-repeat;
/**
* data/assets/images/bm/ui/ui_placeholder_image.svg
*/
/**
* data/assets/images/bm/ui/ui_placeholder_image_cross.svg
*/
/**
* data/assets/images/bm/ui/ui_placeholder_video.svg
*/
/**
* data/assets/images/bm/ui/ui_placeholder_avatar.svg
*/
}
.bm_placeholder.__small {
background-size: 36px 30px;
}
.bm_placeholder.__image {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239BA2AC' fill-rule='evenodd' clip-rule='evenodd' d='M44 32.0345C44 34.2155 42.2083 36 40.0184 36H8.96155C7.16981 36 6.37348 33.819 7.56797 32.6293L14.7349 25.4914C15.5313 24.6983 16.7258 24.6983 17.5221 25.4914L18.7166 26.681C19.5129 27.4741 20.7074 27.4741 21.5037 26.681L34.6431 13.5948C35.4395 12.8017 36.634 12.8017 37.4303 13.5948L43.4028 19.5431C43.8009 19.9397 44 20.3362 44 20.931V32.0345ZM12 8C14.2 8 16 9.8 16 12C16 14.2 14.2 16 12 16C9.8 16 8 14.2 8 12C8 9.8 9.8 8 12 8ZM48 8C48 3.6 44.4 0 40 0H8C3.6 0 0 3.6 0 8V32C0 36.4 3.6 40 8 40H40C44.4 40 48 36.4 48 32V8Z'/%3E%3C/svg%3E%0A");
}
.bm_placeholder.__image_cross {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239BA2AC' viewBox='0 0 48 40'%3E%3Cpath d='m37.63 26 1.512-1.494a1.132 1.132 0 0 0 0-1.652 1.162 1.162 0 0 0-1.67 0l-1.512 1.494-1.511-1.494a1.147 1.147 0 0 0-.796-.315c-.238 0-.556.079-.795.315a1.132 1.132 0 0 0 0 1.652L34.369 26l-1.511 1.494a1.132 1.132 0 0 0 0 1.652 1.162 1.162 0 0 0 1.67 0l1.512-1.494 1.511 1.494c.239.236.557.315.796.315.238 0 .556-.079.795-.315a1.132 1.132 0 0 0 0-1.652L37.631 26Z'/%3E%3Cpath d='M40.004 15.707V8.136c0-3.354-2.97-6.134-6.517-6.134H7.517C3.97 1.907 1 4.686 1 8.04v18.4c0 3.354 2.97 6.133 6.517 6.133h19.358s0-.096-.096-.191c2.013 2.875 5.367 4.695 9.104 4.695C42.017 37.077 47 32.094 47 25.961c0-6.134-2.875-8.625-6.996-10.35v.096ZM10.775 8.04c1.82 0 3.258 1.342 3.258 3.067s-1.437 3.066-3.258 3.066c-1.82 0-3.258-1.341-3.258-3.066 0-1.725 1.437-3.067 3.258-3.067Zm14.567 21.754v-.192H8.283c-1.437 0-2.108-1.629-1.15-2.587l5.846-5.463a1.749 1.749 0 0 1 2.3 0l.959.959c.67.575 1.629.575 2.3 0l10.637-10.063a1.749 1.749 0 0 1 2.3 0l2.78 2.588h.19c-5.462.766-9.678 5.366-9.678 11.02 0 5.655.287 2.588.67 3.738h-.095Zm10.541 4.504c-4.6 0-8.337-3.737-8.337-8.337s3.737-8.338 8.337-8.338 8.338 3.738 8.338 8.338-3.738 8.337-8.338 8.337Z'/%3E%3C/svg%3E");
}
.bm_placeholder.__video {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239BA2AC' fill-rule='evenodd' clip-rule='evenodd' d='M40 0C44.4 0 48 3.6 48 8V32C48 36.4 44.4 40 40 40H8C3.6 40 0 36.4 0 32V8C0 3.6 3.6 0 8 0H40ZM11 8V5H5V8H11ZM16 5H22V8H16V5ZM33 5H27V8H33V5ZM38 5H44V8H38V5ZM11 35V32H5V35H11ZM16 32H22V35H16V32ZM33 32H27V35H33V32ZM38 32H44V35H38V32ZM29.543 21.3609C30.1981 20.9739 30.1981 20.0261 29.543 19.6391L21.5087 14.8915C20.8421 14.4976 20 14.9781 20 15.7524V25.2476C20 26.0219 20.8421 26.5024 21.5087 26.1085L29.543 21.3609Z'/%3E%3C/svg%3E%0A");
}
.bm_placeholder.__avatar {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z' fill='%23F7F7F8'/%3E%3Cmask id='mask0' maskUnits='userSpaceOnUse' x='0' y='0' width='60' height='60'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M43.812 48.313L36.168 44.493C35.45 44.129 35 43.407 35 42.598V39.895C35.184 39.668 35.375 39.415 35.575 39.133C36.567 37.734 37.36 36.176 37.938 34.493C39.067 33.978 39.801 32.859 39.801 31.603V28.398C39.801 27.629 39.512 26.883 39 26.301V22.043C39.043 21.605 39.223 18.984 37.329 16.825C35.684 14.95 33.016 14 29.398 14C25.782 14 23.118 14.95 21.474 16.825C19.579 18.984 19.754 21.605 19.801 22.043V26.301C19.29 26.883 19 27.629 19 28.398V31.603C19 32.575 19.441 33.48 20.2 34.086C20.931 36.988 22.465 39.176 23 39.875V42.524C23 43.297 22.579 44.008 21.898 44.379L14.763 48.274C12.441 49.54 11 51.965 11 54.61V57.2C11 60.997 23.036 62.001 29.398 62.001C35.766 62.001 47.801 60.997 47.801 57.2V54.766C47.801 52.016 46.27 49.543 43.812 48.313Z' fill='%23ECECEC'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
}
.bm_placeholder.__news {
background-color: transparent;
background-size: 160px 120px;
}
.bm_placeholder.__news.__n_bg {
background-color: #ffbed2;
}
.bm_placeholder.__no_bg {
background: none;
}
/**
* Simple inline loader - EX: form sending indicator
*
* Modifiers:
* .bm_simple_loader.__no_bg - circle without bg
*
* Usage example:
*
*
*
*
*/
.bm_simple_loader {
position: relative;
display: inline-block;
box-sizing: border-box;
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
vertical-align: middle;
border: 4px solid #f1f1f3;
border-bottom-color: #2a96e2;
border-radius: 50%;
animation: simple_loader 0.9s cubic-bezier(0.72, 0.51, 0.43, 0.67) infinite;
}
.bm_simple_loader.__no_bg {
border-color: transparent transparent #2a96e2;
}
.bm_simple_loader:before, .bm_simple_loader:after {
content: "";
position: absolute;
top: 13px;
display: block;
width: 4px;
height: 4px;
background-color: #2a96e2;
border-radius: 50%;
}
.bm_simple_loader:before {
left: 13px;
}
.bm_simple_loader:after {
right: 13px;
}
/* needs for FF, because of changing height while animating */
.bm_simple_loader_wrap {
height: 24px;
overflow: hidden;
}
@keyframes simple_loader {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/**
* Box loader - circular loader use for indicate load of data
*
* Usage examples:
*
*/
.bm_box_loader {
position: relative;
width: 56px;
height: 56px;
border: 5px solid rgba(0, 0, 0, 0.2);
border-bottom-color: #2a96e2;
border-radius: 50%;
animation: bm_box_loader 1.3s linear infinite;
}
.bm_box_loader:before, .bm_box_loader:after {
content: "";
position: absolute;
top: 47px;
display: block;
width: 5px;
height: 5px;
background-color: #2a96e2;
border-radius: 50%;
}
.bm_box_loader:before {
left: 47px;
}
.bm_box_loader:after {
right: 47px;
}
@keyframes bm_box_loader {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/**
* Loading bar - bar at the top of the page, indicates page loading
*
* Modifiers:
* .bm_loading_bar.__fixed – fixed state
* .bm_loading_bar.__placeholder – hidden bar used as placeholder
* .bm_loading_bar.__loaded – final state
*
* Examples:
*
*/
.role_studio .bm_loading_bar:before {
background: #86fffc;
}
.bm_loading_bar {
position: relative;
top: 0;
left: 0;
z-index: 580;
width: 100%;
height: 3px;
margin-bottom: -3px;
transform: translateY(3px);
}
.bm_loading_bar:before {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #fdc2d9;
animation: loading_bar 0.9s linear 0s 1 normal forwards;
content: "";
}
.bm_loading_bar.__fixed {
position: fixed;
transform: none;
}
.bm_loading_bar.__placeholder {
height: 0;
visibility: hidden;
}
.bm_loading_bar.__loaded:before {
animation-duration: 0.5s;
}
@keyframes loading_bar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
/**
* Loading dots - dots, indicates data loading
*
* Usage examples:
*
*
*
* 2. As a radiobutton:
*
*
*
*
*
* 3. As a checkbox:
*
*
*
*
*
* 4. As a button with custom html
*
* ...
* ...
*
*
*/
.bm_switch {
position: relative;
display: inline-block;
width: 80px;
min-width: 80px;
height: 38px;
padding: 0;
background-color: #ececee;
border: 0;
border-radius: 38px;
cursor: pointer;
transition: background-color 0.2s;
}
.bm_switch:before, .bm_switch:after {
position: absolute;
top: 0;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 100%;
font: 700 12px/1.3 "Open Sans", sans-serif;
text-transform: uppercase;
transition: opacity 0.2s;
}
.bm_switch:before {
content: attr(data-off);
justify-content: flex-end;
padding-right: 15px;
color: #9aa1ac;
}
.bm_switch:after {
content: attr(data-on);
justify-content: flex-start;
padding-left: 15px;
color: #fff;
opacity: 0;
}
.bm_switch.__st_html:before, .bm_switch.__st_html:after {
display: none;
}
.bm_switch.__disabled {
background-color: #f7f7f8;
pointer-events: none;
}
.bm_switch.__swr_on {
background-color: #2a96e2;
}
.bm_switch.__swr_on:before {
opacity: 0;
}
.bm_switch.__swr_on:after {
opacity: 1;
}
.bm_switch.__swr_on.__disabled {
background-color: #68a0c8;
pointer-events: none;
}
.bm_switch.__swr_on .swr_off {
opacity: 0;
}
.bm_switch.__swr_on .swr_on {
opacity: 1;
}
.bm_switch.__swr_on .bm_switch_handle {
background-position-x: 100%;
animation-name: swr_turn_on;
}
.bm_switch.__small {
width: 53px;
min-width: 53px;
height: 21px;
border-radius: 21px;
}
.bm_switch.__small:before, .bm_switch.__small:after {
font-size: 10px;
}
.bm_switch.__small:before {
padding-right: 8px;
}
.bm_switch.__small:after {
padding-left: 10px;
}
.bm_switch.__small .bm_switch_handle {
right: 1px;
left: 1px;
background-size: 19px;
}
.bm_switch.__medium {
width: 58px;
min-width: 58px;
height: 28px;
}
.bm_switch.__medium:before, .bm_switch.__medium:after {
font-size: 11px;
}
.bm_switch.__medium:after {
padding-left: 8px;
}
.bm_switch.__medium:before {
padding-right: 8px;
}
.bm_switch.__medium .bm_switch_handle {
background-size: 28px;
}
.bm_switch.__darker {
background-color: #e4e4e7;
}
.bm_switch.__darker.__swr_on {
background-color: #2a96e2;
}
.bm_switch.__wide {
width: 100%;
}
.bm_switch.__swr_dyn .bm_switch_handle {
animation-duration: 0.2s;
}
.bm_switch .swr_off, .bm_switch .swr_on {
position: absolute;
top: 0;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 5px 15px;
font-family: "Open Sans", sans-serif;
transition: opacity 0.2s, color 0.2s;
}
.bm_switch .swr_off {
justify-content: flex-end;
color: #9aa1ac;
opacity: 1;
}
.bm_switch .swr_on {
color: #fff;
opacity: 0;
}
.bm_switch .swr_icon {
width: 16px;
height: 16px;
}
.bm_switch_handle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(0, 0, 0, 0.06)' d='M19 37C27.8366 37 35 29.8366 35 21C35 12.1634 27.8366 5 19 5C10.1634 5 3 12.1634 3 21C3 29.8366 10.1634 37 19 37Z'/%3E%3Cpath fill='white' d='M19 35C27.8366 35 35 27.8366 35 19C35 10.1634 27.8366 3 19 3C10.1634 3 3 10.1634 3 19C3 27.8366 10.1634 35 19 35Z'/%3E%3C/svg%3E%0A") 0 50%/cover no-repeat;
background-size: 38px;
animation: swr_turn_off 0s ease-in-out;
pointer-events: none;
}
/* styles when checked (if used as a radiobutton or checkbox) */
.bmf_check_input:checked ~ .bm_switch {
background-color: #2a96e2;
}
.bmf_check_input:checked ~ .bm_switch:before {
opacity: 0;
}
.bmf_check_input:checked ~ .bm_switch:after {
opacity: 1;
}
.bmf_check_input:checked ~ .bm_switch .bm_switch_handle {
background-position-x: 100%;
animation-name: swr_turn_on;
}
@keyframes swr_turn_on {
0% {
background-position-x: 0;
}
100% {
background-position-x: 100%;
}
}
@keyframes swr_turn_off {
0% {
background-position-x: 100%;
}
100% {
background-position-x: 0;
}
}
/**
* Custom switch component
*
* Usage example:
*
* 1. As a button:
*
*
*
*
*
*
*
* 2. As a radiobutton:
*
*
*
*
*
*
*
*
*
* 3. As a checkbox:
*
*
*
*
*
*
*
*
*
*/
.bm_switch_custom_wrap .bmf_check_input:not(.__controlled):checked ~ .bm_switch_custom:before, .bm_switch_custom_wrap .bmf_check_input.__controlled.__swr_on ~ .bm_switch_custom:before {
transform: translateX(35%);
}
.bm_switch_custom_wrap .bmf_check_input:not(.__controlled):checked ~ .bm_switch_custom .bm_switch_trigger:first-child, .bm_switch_custom_wrap .bmf_check_input.__controlled.__swr_on ~ .bm_switch_custom .bm_switch_trigger:first-child {
color: inherit;
}
.bm_switch_custom_wrap .bmf_check_input:not(.__controlled):checked ~ .bm_switch_custom .bm_switch_trigger:first-child:before, .bm_switch_custom_wrap .bmf_check_input.__controlled.__swr_on ~ .bm_switch_custom .bm_switch_trigger:first-child:before {
width: 0;
}
.bm_switch_custom_wrap .bmf_check_input:not(.__controlled):checked ~ .bm_switch_custom .bm_switch_trigger:last-child, .bm_switch_custom_wrap .bmf_check_input.__controlled.__swr_on ~ .bm_switch_custom .bm_switch_trigger:last-child {
color: #fff;
}
.bm_switch_custom_wrap .bmf_check_input:not(.__controlled):checked ~ .bm_switch_custom .bm_switch_trigger:last-child:before, .bm_switch_custom_wrap .bmf_check_input.__controlled.__swr_on ~ .bm_switch_custom .bm_switch_trigger:last-child:before {
width: 100%;
}
.bm_switch_custom_wrap.__hover .bmf_check_input ~ .bm_switch_custom:before, .bm_switch_custom_wrap.__hover .bmf_check_input ~ .bm_switch_custom .bm_switch_trigger:before, .bm_switch_custom_wrap:hover .bmf_check_input ~ .bm_switch_custom:before, .bm_switch_custom_wrap:hover .bmf_check_input ~ .bm_switch_custom .bm_switch_trigger:before {
background: #0d71ba;
}
.bm_switch_custom_wrap.__disabled {
pointer-events: none;
}
.bm_switch_custom_wrap.__disabled .bmf_check_input ~ .bm_switch_custom:before {
display: none;
}
.bm_switch_custom_wrap.__disabled .bmf_check_input ~ .bm_switch_custom .bm_switch_trigger:before {
background: #f7f7f8;
}
.bm_switch_custom_wrap.__disabled .bmf_check_input ~ .bm_switch_custom .bm_switch_trigger:after {
color: #9ba2ac;
}
.bm_switch_custom {
position: relative;
display: inline-flex;
align-items: center;
box-sizing: border-box;
height: 36px; /* 2px - margins */
margin: 1px;
padding: 0;
overflow: hidden;
color: #606771;
background-color: #fff;
border: 2px solid #fff;
border-radius: 38px;
box-shadow: 0 0 0 1px #e8ebed;
cursor: pointer;
will-change: transform; /* need for safary */
}
.bm_switch_custom:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 32px;
background-color: #2a96e2;
border-radius: 32px;
transform: translateX(-85%);
transition: transform 0.4s ease-in-out;
will-change: transform; /* need for safary */
}
.bm_switch_trigger {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-width: 40px;
height: 32px;
padding: 0 23px;
font: 700 14px/1.3 "Open Sans", sans-serif;
text-transform: none;
opacity: 1;
transition: color 0.25s;
transition-delay: 0.15s;
}
.bm_switch_trigger:before {
content: "";
position: absolute;
top: 0;
width: 0;
height: 100%;
background-color: #2a96e2;
border-radius: 32px;
transition: width 0.2s;
transition-delay: 0.1s;
}
.bm_switch_trigger:after {
content: attr(data-content);
position: relative;
}
.bm_switch_trigger:first-child {
color: #fff;
}
.bm_switch_trigger:first-child:before {
right: 0;
width: 100%;
}
.bm_switch_trigger:last-child:before {
left: 0;
}
/**
* Table component
* You can use html or css tables
*
* @prefix:
* - tbl_ = table
*
* Modifiers:
* .bm_table_wrp.__light - for table with light bg color
* .bm_table.__tall_row - for increase row height
* .tbl_head.__sticky - for fix the header when scrolling the table
* .tbl_cell.__head - for head cell
* .tbl_cell.__body - for body cell
* .tbl_cell.__cell_num - for cell contains numbers
* .tbl_cell.__cell_center - for cell centering content
* .tbl_cell.__cell_colspan - for sub cell
* .tbl_sort.tbl_arrow.__active - active sort arrow
* .tbl_sort.tbl_arrow.__top - top sort arrow state
* .tbl_row.__open - mod for open row table add other rows
*/
.bm_table_wrp.__light {
padding: 25px 25px 35px;
background: #ecfafd;
border-radius: 28px;
box-shadow: 0 1px 0 #dcf0f4;
}
.bm_table_wrp .bm_scroll {
max-height: 300px;
}
.bm_table_wrp .bm_scroll, .bm_table_wrp .bms_wrp {
display: flex;
flex-direction: column;
}
.bm_table_wrp .bms_wrp, .bm_table_wrp .bms_content {
min-height: 1px;
}
.bm_table_wrp .tbl_empty_content {
padding-bottom: 5px;
}
.bm_table_wrp .tbl_loader {
display: block;
margin: 5px auto 0;
}
.bm_table_head_wrap {
overflow: hidden;
}
.bm_table_head_wrap .bm_table {
position: relative;
}
.bm_table {
display: table;
width: 100%;
color: #353c46;
text-align: left;
}
.bm_table.__tall_row .tbl_cell.__body {
height: 50px;
padding: 10px 14px;
}
.bm_table .tbl_sort_cell {
display: flex;
align-items: center;
cursor: pointer;
}
.bm_table .tbl_sort_cell.__asc, .bm_table .tbl_sort_cell.__desc {
color: #353c46;
}
.bm_table .tbl_sort_cell.__asc .tbl_sort_icon:after {
border-color: #353c46;
}
.bm_table .tbl_sort_cell.__desc .tbl_sort_icon:before {
border-color: #353c46;
}
.bm_table .tbl_sort_icon {
position: relative;
left: 7px;
display: inline-block;
width: 8px;
height: 11px;
}
.bm_table .tbl_sort_icon:before, .bm_table .tbl_sort_icon:after {
content: "";
position: absolute;
right: 0;
width: 3px;
height: 3px;
border-top: 1px #92a9ae solid;
border-left: 1px #92a9ae solid;
}
.bm_table .tbl_sort_icon:before {
top: 2px;
transform: rotate(45deg);
}
.bm_table .tbl_sort_icon:after {
bottom: 2px;
transform: rotate(-135deg);
}
.bm_table .tbl_head.__sticky {
position: sticky;
top: 0;
z-index: 2;
background: #ecfafd;
}
.bm_table .tbl_head_row, .bm_table .tbl_row {
display: table-row;
}
.bm_table .tbl_row.__open {
display: contents;
}
.bm_table .tbl_row.__open .tbl_row:not(:first-child) .tbl_cell.__body:first-child {
border-top-left-radius: 0;
}
.bm_table .tbl_row.__open .tbl_row:not(:first-child) .tbl_cell.__body:last-child {
border-top-right-radius: 0;
}
.bm_table .tbl_row.__open .tbl_row:not(:last-child) .tbl_cell.__body:first-child {
border-bottom-left-radius: 0;
}
.bm_table .tbl_row.__open .tbl_row:not(:last-child) .tbl_cell.__body:last-child {
border-bottom-right-radius: 0;
}
.bm_table .tbl_row:not(tr):nth-child(even) .tbl_cell {
background-color: #e3f4f8;
}
.bm_table .tbl_body > tr:nth-child(odd) td {
background-color: #e3f4f8;
}
.bm_table .tbl_head_row {
color: #92a9ae;
}
.bm_table .tbl_cell {
display: table-cell;
box-sizing: border-box;
height: 30px;
padding: 7px 14px;
font-size: 11px;
line-height: 1.4;
text-align: left;
vertical-align: middle;
}
.bm_table .tbl_cell.__body:first-child {
border-radius: 7px 0 0 7px;
}
.bm_table .tbl_cell.__body:last-child {
border-radius: 0 7px 7px 0;
}
.bm_table .tbl_cell.__cell_num {
text-align: right;
}
.bm_table .tbl_cell.__cell_center {
text-align: center;
}
.bm_table .tbl_cell.__cell_colspan {
background: #e3f4f8;
border: 2px #ecfafd solid;
border-radius: 7px;
}
.bm_table .tbl_cell_inner {
display: flex;
align-items: center;
}
.bm_table .tbl_sort {
padding-top: 2px;
padding-left: 5px;
}
.bm_table .tbl_sort .tbl_arrow {
position: relative;
display: block;
box-sizing: border-box;
width: 10px;
height: 7px;
padding: 2px;
cursor: pointer;
}
.bm_table .tbl_sort .tbl_arrow:before, .bm_table .tbl_sort .tbl_arrow:after {
content: "";
position: absolute;
top: 3px;
display: block;
width: 4px;
height: 1px;
background-color: #92a9ae;
border-radius: 1px;
transition: background-color 0.2s;
}
.bm_table .tbl_sort .tbl_arrow:before {
transform: rotate(45deg);
}
.bm_table .tbl_sort .tbl_arrow:after {
left: 4px;
transform: rotate(-45deg);
}
.bm_table .tbl_sort .tbl_arrow:hover:before, .bm_table .tbl_sort .tbl_arrow:hover:after, .bm_table .tbl_sort .tbl_arrow.__active:before, .bm_table .tbl_sort .tbl_arrow.__active:after {
background-color: #6c133b;
}
.bm_table .tbl_sort .tbl_arrow.__active {
cursor: default;
}
.bm_table .tbl_sort .tbl_arrow.__top {
transform: rotate(180deg);
}
/**
* Progress bar
*
* @prefix:
* - bmpb_ = .bm_progress_bar
*
* Modifiers:
* - .bm_progress_bar.__slow - slow animation
*
*/
.bm_progress_bar {
position: relative;
margin: 5px 0;
}
.bm_progress_bar .bmpb_track {
display: block;
width: 100%;
height: 5px;
background: rgba(155, 162, 172, 0.6);
}
.bm_progress_bar .bmpb_progress {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 5px;
background: #2a96e2;
transition: width 0.4s;
}
.bm_progress_bar.__slow .bmpb_progress {
transition: width 1.2s;
}
/**
* Thumbnails
*
* @prefix:
* - bmt_ = bm_thumbnail
*
*/
/**
* Thumbnails Variables
*
*/
/* region mobile variables */
/* endregion mobile variables */
/**
* Album thumbnail
*
* @prefix:
* - .bmta_ = bmt_album
* - .tat_ = bmta_title
*
* .bmta_inner.__hidden - hidden state of image placeholder, when content image is already loaded
*/
.bmt_album {
display: inline-block;
padding: 9px;
text-decoration: none;
vertical-align: top;
border: 1px solid #ececf0;
}
.bmt_album:hover {
border-color: #2a96e2;
}
.bmt_album .bmta_inner {
position: relative;
display: block;
width: 167px;
height: 167px;
overflow: hidden;
color: #fff;
font-weight: 600;
}
.bmt_album .bmta_inner:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(30, 87, 153, 0) 50%, rgba(0, 0, 0, 0.3) 100%);
}
.bmt_album .bmta_inner.__hidden {
background-image: none;
}
.bmt_album .bmta_image {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: auto;
min-width: 100%;
max-width: none;
height: auto;
min-height: 100%;
transform: translate(-50%, -50%);
}
.bmt_album .bmta_data {
position: absolute;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 100%;
padding: 12px;
}
.bmt_album .bmta_protected {
top: -2px;
flex-shrink: 0;
margin-right: 4px;
}
.bmt_album .bmta_title {
display: flex;
width: 100%;
}
.bmt_album .tat_text {
flex-grow: 1;
width: 0;
overflow: hidden;
font-size: 14px;
line-height: 18px;
white-space: nowrap;
text-overflow: ellipsis;
}
.bmt_album .bmta_quantity {
display: block;
font-size: 13px;
line-height: 16px;
}
.bmta_protected {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
}
.bmta_protected .ui_icon_lock {
width: 6px;
height: 8px;
}
/**
* Album Photo thumbnail
*
* @prefix:
* - .bmtp_ = bmt_photo
* Modifiers:
* .bmt_photo.__active - active thumbnail in slider
* .bmt_photo.__playing - playing progress bar animating
* .bmta_inner.__hidden - hidden state of image placeholder, when content image is already loaded
*/
.bmt_photo {
position: relative;
display: inline-block;
overflow: hidden; /* Microsoft Edge on hover rendering bug fix */
text-decoration: none;
vertical-align: top;
cursor: pointer;
}
.bmt_photo:before, .bmt_photo:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
content: "";
}
.bmt_photo:before {
z-index: 15;
width: 100%;
background: rgba(155, 162, 172, 0.6);
opacity: 0;
}
.bmt_photo:after {
z-index: 20;
background: #2a96e2;
opacity: 0;
}
.bmt_photo.__active {
cursor: default;
}
.bmt_photo.__active:before, .bmt_photo.__active:after {
opacity: 1;
transition: opacity 0.2s ease;
}
.bmt_photo.__playing:after {
animation: photoProgressLine 5s linear 0s 1 normal both;
}
.bmt_photo .bmtp_inner {
position: relative;
display: block;
width: 146px;
height: 190px;
overflow: hidden;
color: #fff;
font-weight: 600;
}
.bmt_photo .bmtp_inner.__hidden {
background-image: none;
}
.bmt_photo .bmtp_image {
width: 100%;
height: 100%;
object-fit: cover;
}
.bmt_photo .bmtp_image.__broken {
display: none;
}
.bmt_photo .bmtp_data {
position: absolute;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 100%;
padding: 80px 12px 12px;
}
.bmt_photo .bmtp_data:before {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(30, 87, 153, 0) 50%, rgba(0, 0, 0, 0.3) 100%);
content: "";
}
.bmt_photo .bmtp_comments {
position: relative;
z-index: 5;
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bmt_photo .bmtp_remove {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
color: #81003a;
background: #fff;
border-radius: 50%;
cursor: pointer;
}
.bmt_photo .bmtp_remove .bmtp_remove_icon {
width: 10px;
height: 10px;
}
.bmt_photo .bmtp_status {
position: absolute;
top: 10px;
left: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
color: #353c46;
background: #fff;
border-radius: 50%;
}
.bmt_photo .bmtp_status.__rejected {
color: #e50000;
}
.bmt_photo .bmtp_status_icon {
width: 16px;
height: 16px;
}
@keyframes photoProgressLine {
0% {
width: 0;
}
95% {
width: 100%;
}
}
/**
* Collapsible panel
*
* Usage examples:
*
*
* @prefix:
* - cpl_ = collapsible_panel .bm_collapse_wrp
* - cplt_ = .cpl_title
*
* Modifiers:
* .bm_collapse_wrp.__light - white background color
* .bm_collapse_head.__active - head state, if panel is collapsed
* .bm_collapse_head.__collapsible - head cursor pointer, if panel is controlled
* .bm_collapse_body.__visible - body state, if panel is expanded
* .bm_collapse_body.__limited - height of span wrapped is limited
*/
.bm_collapse_wrp {
box-sizing: border-box;
margin-bottom: 10px;
padding: 10px 0;
background: #ecfafd;
border-radius: 28px;
box-shadow: 0 1px 0 #dcf0f4;
}
.bm_collapse_wrp.__light {
background: #fff;
}
.bm_collapse_wrp.__light .bm_table tr:nth-child(odd) td {
background: #f7f7f8;
}
.bm_collapse_wrp.__light .tbl_cell {
color: #606771;
}
.bm_collapse_wrp .bmf_check .bmf_mark {
background-color: #d6eaef;
}
.bm_collapse_wrp .bmf_check .bmf_check_input:checked ~ .bmf_mark {
background-color: #cce5eb;
}
.bm_collapse_wrp .bmf_check.__hover .bmf_mark, .bm_collapse_wrp .bmf_check:hover .bmf_mark {
background-color: #cce5eb;
}
.bm_collapse_wrp .bmf_check.__disabled .bmf_text {
color: #92a9ae;
}
.bm_collapse_wrp .bmf_check.__disabled .bmf_mark {
background-color: #e5f2f5;
}
.bm_collapse_wrp .bm_table_wrp {
margin: 10px -5px 15px;
}
.bm_collapse_wrp .bm_table_wrp.__empty {
min-height: 24px;
margin: 0;
}
.bm_collapse_wrp .bm_table_wrp .tbl_empty_content {
padding-bottom: 0;
}
.bm_collapse_wrp .bm_scroll > .bms_wrp {
padding-right: 10px !important; /* forced indent */ /* stylelint-disable-line declaration-no-important */
}
.bm_collapse_head {
box-sizing: border-box;
min-height: 38px;
padding: 0 30px;
color: #353c46;
font-size: 11px;
}
.bm_collapse_head.__active .cpl_arrow {
transform: rotate(0deg);
}
.bm_collapse_head.__collapsible {
cursor: pointer;
}
.bm_collapse_head.__collapsible .cpl_arrow {
cursor: pointer;
}
.bm_collapse_head .cpl_title {
flex: 1 1 auto;
margin-right: 10px;
}
.bm_collapse_head .cpl_title .bm_help_wrp, .bm_collapse_head .cpl_title .bm_simple_loader {
margin-left: 16px;
}
.bm_collapse_head .cplt_value {
display: flex;
flex-shrink: 0;
flex-wrap: nowrap;
margin-left: 20px;
color: #17ae45;
font-weight: 600;
font-size: 24px;
}
.bm_collapse_head .cpl_arrow {
position: relative;
display: block;
flex-shrink: 0;
align-self: center;
box-sizing: border-box;
width: 23px;
height: 23px;
margin-right: -7px;
padding: 4px;
background: none;
border: none;
transform: rotate(-180deg);
transition: all 0.3s;
}
.bm_collapse_head .cpl_arrow:before, .bm_collapse_head .cpl_arrow:after {
content: "";
position: absolute;
top: 10px;
display: block;
width: 10px;
height: 3px;
background-color: #17ae45;
border-radius: 1.5px;
}
.bm_collapse_head .cpl_arrow:before {
transform: rotate(45deg);
}
.bm_collapse_head .cpl_arrow:after {
left: 9px;
transform: rotate(-45deg);
}
.bm_collapse_body {
display: none;
padding: 3px 30px 0;
}
.bm_collapse_body.__visible {
display: block;
}
.bm_collapse_body .bm_collapse_body_content.__limited {
height: 100%;
}
/**
* Collapsible Clean panel
*
* Usage examples:
*
*
* @prefix:
* - cpc_ = collapsible_panel_clean
*
* Modifiers:
* .bm_collapse_clean_head.__active - head state, if panel is collapsed
*/
.bm_collapse_clean .cpc_head {
display: flex;
padding: 5px 0 4px;
}
.bm_collapse_clean .cpc_head.__active .cpc_arrow {
transform: rotate(180deg);
}
.bm_collapse_clean .cpc_head > * {
cursor: pointer;
}
.bm_collapse_clean .cpc_arrow {
position: relative;
top: 3px;
display: inline-block;
width: 13px;
height: 15px;
margin-left: 9px;
color: #81003a;
}
/**
* Round indicator. Ex: Profile completeness
*
* @prefix:
* - ri_ = bm_round_indicator
*
* Modifiers:
* .ri_line.__filled - filled indicator progress bar
*
* stroke-dashoffset="471" - 0% completeness
* stroke-dashoffset="140" - 100% completeness
*
* Usage example:
*
*
*
*
*
*
*
*
*
*/
.bm_round_indicator {
position: relative;
width: 156px;
height: 156px;
padding: 11px;
border: 1px solid #f4f2f2;
border-radius: 100%;
}
.bm_round_indicator .ri_text_wrp {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 35px 30px 45px;
font-weight: 700;
font-size: 16px;
line-height: 1.375;
text-align: center;
text-transform: uppercase;
border-radius: 100%;
}
.bm_round_indicator .ri_text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.bm_round_indicator .ri_bar {
width: 100%;
height: 100%;
transform: rotate(-218deg);
}
.bm_round_indicator .ri_line {
transition: stroke-dashoffset 1s linear;
fill: transparent;
stroke: #ededf0;
stroke-linecap: round;
stroke-width: 8px;
stroke-dasharray: 471px;
}
.bm_round_indicator .ri_line.__filled {
stroke: url(#round_indicator_bg);
}
/**
* Video player
*
* Usage example:
*
*
*/
/**
* Video player wrapper
*
* @prefix:
* - bmv_ = bm_video
*
* Modifiers:
* .bm_video.__hide_bottom - to hide bottom panel
* .bm_video.__playing - to display pause button when video is playing
* .bm_video.__sound_off - to hide sound waves icon when video is muted
* .bm_video.__fullscreen_mode - to display classic screen size icon when video is in a fullscreen mode
* .bm_video.__fullscreen_ios - to display classic screen size icon when video is in a fullscreen mode on iOS
* .bm_video.__vtt - mod for vtt subtitles
*/
.bm_video {
position: relative;
width: 100%;
padding-bottom: 56.25%;
overflow: hidden;
background-color: #000;
}
.bm_video.__hide_bottom .bmv_bottom {
transform: translateY(100%);
}
.bm_video.__playing .bmv_btn.__play_pause .bmv_icon_default {
opacity: 0;
}
.bm_video.__playing .bmv_btn.__play_pause .bmv_icon_active {
opacity: 1;
}
.bm_video.__playing .bmv_overlay {
visibility: hidden;
opacity: 0;
}
.bm_video.__sound_off .bmv_btn.__sound_toggl .bmv_icon_max, .bm_video.__sound_off .bmv_btn.__sound_toggl .bmv_icon_default {
opacity: 0;
}
.bm_video.__sound_off .bmv_btn.__sound_toggl .bmv_icon_active {
opacity: 1;
}
.bm_video.__sound_max .bmv_btn.__sound_toggl .bmv_icon_active, .bm_video.__sound_max .bmv_btn.__sound_toggl .bmv_icon_default {
opacity: 0;
}
.bm_video.__sound_max .bmv_btn.__sound_toggl .bmv_icon_max {
opacity: 1;
}
.bm_video.__vtt.__vtt_firefox .bmv_file::cue {
font-size: 2.5em;
}
.bm_video.__vtt.__vtt_ios .bmv_file::cue {
font-size: 1.25em;
}
.bm_video.__vtt .bmv_file::cue {
font-size: 1.5em;
}
.bm_video.__fullscreen_ios .bmv_file::cue {
font-size: 2em;
}
.bm_video.__fullscreen_mode {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 614;
padding: 0;
}
.bm_video.__fullscreen_mode .bmv_file {
width: 100%;
height: 100%;
}
.bm_video.__fullscreen_mode .bmv_btn.__screen_toggl .bmv_icon_default {
opacity: 0;
}
.bm_video.__fullscreen_mode .bmv_btn.__screen_toggl .bmv_icon_active {
opacity: 1;
}
.bm_video .bmv_file {
position: absolute;
top: 0;
display: block;
width: 100%;
max-height: 100%;
}
.bm_video .bmv_overlay {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}
.bm_video .bmv_overlay_icon {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
color: #fff;
background: rgba(53, 60, 70, 0.35);
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s ease;
}
.bm_video .bmv_overlay_icon:hover {
transform: scale(1.1);
}
.bm_video .bmv_overlay_icon .ui_player_play {
width: 16px;
height: 18px;
margin-left: 7%;
pointer-events: none;
}
.bmv_bottom {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
height: 67px;
padding: 0 15px;
transform: translateY(0);
transition: transform 0.2s;
}
.bmv_bottom .bmv_bg {
position: absolute;
bottom: 0;
width: 100%;
box-shadow: 0 0 30px 40px rgba(0, 0, 0, 0.5);
}
/**
* Video player progress bar
*
* @prefix:
* - bmv_ = bm_video
*
*/
.bmv_progress {
position: relative;
width: 100%;
height: 16px;
cursor: pointer;
}
.bmv_progress:hover .bmv_progress_bar {
transform: scaleY(1);
}
.bmv_progress:hover .bmv_progress_handle {
transform: scale(1);
}
.bmv_progress .bmv_progress_bar {
position: absolute;
top: 5px;
width: 100%;
height: 5px;
background: rgba(155, 162, 172, 0.6);
transform: scaleY(0.6);
transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
}
.bmv_progress .bmv_progress_bar .bmv_loaded {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #979797;
transform-origin: 0 0;
}
.bmv_progress .bmv_progress_bar .bmv_played {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #81003a;
transform-origin: 0 0;
transition: width 0.4s ease;
}
.bmv_progress .bmv_progress_handle {
position: absolute;
top: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
margin-left: -6px;
background: #81003a;
border-radius: 50%;
transform: scale(0);
transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1), left 0.4s ease;
}
/**
* Video player wrapper controls
*
* @prefix:
* - bmv_ = bm_video
*
* Modifiers:
* .bmv_btn.__play_pause - to style play/pause button
* .bmv_btn.__sound_toggl - to style sound on/off button
* .bmv_btn.__screen_toggl - to style fullscreen mode button
*
*/
.bmv_controls {
position: relative;
width: 100%;
}
.bmv_controls .bmv_btn {
position: relative;
height: 42px;
padding: 12px 11px;
background-color: transparent;
border: 0;
cursor: pointer;
}
.bmv_controls .bmv_btn:hover .bmv_icon {
fill: #fff;
}
.bmv_controls .bmv_btn.__play_pause {
width: 40px;
margin-right: 9px;
}
.bmv_controls .bmv_btn.__sound_toggl {
width: 43px;
}
.bmv_controls .bmv_btn.__screen_toggl {
width: 48px;
margin-right: 3px;
margin-left: auto;
}
.bmv_controls .bmv_btn .bmv_icon {
height: 18px;
transition: all 0.1s;
fill: #d0d0d0;
}
.bmv_controls .bmv_btn .bmv_icon.__icon_play_pause {
position: absolute;
top: 12px;
left: 15px;
display: block;
width: 15px;
}
.bmv_controls .bmv_btn .bmv_icon.__icon_sound {
width: 21px;
}
.bmv_controls .bmv_btn .bmv_icon.__icon_fullscreen {
position: absolute;
top: 12px;
left: 12px;
display: block;
width: 24px;
}
.bmv_controls .bmv_btn .bmv_icon_default {
opacity: 1;
transition: opacity 0.1s;
}
.bmv_controls .bmv_btn .bmv_icon_max, .bmv_controls .bmv_btn .bmv_icon_active {
opacity: 0;
transition: opacity 0.1s;
}
.bmv_controls .bmv_vol_wrp {
margin-right: 21px;
padding: 15px 0;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease;
user-select: none;
}
.bmv_controls .bmv_vol_wrp:hover {
opacity: 1;
}
.bmv_controls .bmv_vol_wrp:hover .bmv_vol_handle {
transform: scale(1.2);
}
.bmv_controls .bmv_vol_wrp .bmv_vol {
position: relative;
width: 50px;
height: 3px;
background-color: #b3b3b3;
border-radius: 2px;
}
.bmv_controls .bmv_vol_wrp .bmv_vol_level {
position: absolute;
top: 0;
height: 3px;
background-color: #fff;
border-radius: 2px;
}
.bmv_controls .bmv_vol_wrp .bmv_vol_handle {
position: absolute;
top: 50%;
width: 9px;
height: 9px;
margin-top: -4.5px;
background-color: #fff;
border-radius: 50%;
transform: scale(1);
transition: transform 0.2s;
}
.bmv_controls .bmv_time {
color: #b3b3b3;
font: 600 14px/1.6 "Open Sans", sans-serif;
user-select: none;
}
.bmv_controls .bmv_time .bmv_time_current {
color: #fff;
}
/**
* Alerts
*
* Modifiers:
* .bm_alert.__extended - for multiline alerts
* .bm_alert.__mini - for mini alerts
* .bm_alert.__form_alert - form alert
* .bm_alert_icon.__success - success message icon
* .bm_alert_icon.__warning - warning message icon
* .bm_alert_icon.__danger - danger message icon
* .bm_alert_icon.__info - info message icon
* .bm_alert_icon.__caution - caution message icon
* .bm_alert_icon.__accent.__success - success color background
* .bm_alert_icon.__accent.__warning - warning color background
* .bm_alert_icon.__accent.__danger - danger color background
* .bm_alert_icon.__accent.__info - info color background
* .bm_alert_icon.__accent.__caution - caution color background
*
* Usage example:
*
In 3 months we will apply classic style for all Classic profiles. If you wish to continue using custom appearance for your profile, please switch to Custom mode.
Learn more
*
*/
.bm_alert {
padding: 7px 27px 7px 7px;
color: #353c46;
font-weight: 700;
font-size: 12px;
line-height: 1.33;
text-align: left;
background-color: #ecfafd;
border-radius: 20px;
}
.bm_alert.__extended {
padding: 20px 27px 20px 20px;
font-weight: 600;
line-height: 1.5;
}
.bm_alert.__form_alert {
margin: 0 0 20px;
}
.bm_alert.__mini {
margin: 0 0 0 15px;
padding: 0;
background-color: transparent;
}
.bm_alert.__mini .bm_alert_icon {
margin: 0;
}
.bm_alert.__accent.__success {
background-color: #dcf3e3;
}
.bm_alert.__accent.__warning {
background-color: #fcf5cf;
}
.bm_alert.__accent.__danger {
background-color: #f9e7e7;
}
.bm_alert.__accent.__info {
background-color: #dfeffb;
}
.bm_alert.__accent.__caution {
background-color: #ecfafd;
}
.bm_alert.__grey {
background-color: #dfeffb;
}
.bm_alert.__caution {
border-radius: 8px;
}
.bm_alert .bm_alert_icon {
flex: 0 0 24px;
align-self: flex-start;
min-width: 24px;
margin-right: 15px;
}
.bm_alert .bm_alert_paragraph {
margin: 0 0 10px;
font-weight: 600;
}
.bm_alert .bm_alert_paragraph:last-child {
margin: 0;
}
.bm_alert_icon {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
}
.bm_alert_icon.__success {
fill: #17ae45;
}
.bm_alert_icon.__warning {
color: #fff;
fill: #efcd19;
}
.bm_alert_icon.__danger {
fill: #81003a;
}
.bm_alert_icon.__info {
fill: #2a96e2;
}
.bm_alert_icon.__caution {
border-radius: 0;
fill: #ffba00;
}
/*
* Style for Overflow Detector
*
* Modifiers
* .bm_overflow_detector.__active - mod for block with active fade
*/
.bm_overflow_detector {
position: relative;
overflow: hidden;
white-space: nowrap;
}
.bm_overflow_detector.__active:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), white);
content: "";
}
/**
* Range input
*
* @prefix:
* - bmrg_ = bm_range
*
* Modifiers:
* .bmrg_selected_edge.__from - left range control
* .bmrg_selected_edge.__to - right range control
* .bmrg_label.__selected - labels for selected values
* .bmrg_label.__from - label of start value
* .bmrg_label.__to - label of end value
* .bmrg_container.__disabled - disabled range state
* .bmrg_container.__magnetic
*
*/
.bm_range {
position: relative;
height: 20px;
margin: 0 20px;
padding: 20px 0;
user-select: none;
}
.bm_range .bmrg_track, .bm_range .bmrg_selected_range {
position: absolute;
top: 50%;
right: 0;
left: 0;
height: 9px;
margin-top: -4.5px;
border-radius: 5px;
}
.bm_range .bmrg_track {
background: #f7f7f8;
}
.bm_range .bmrg_selected_range {
background: linear-gradient(to right, #2b9777, #2a96e2);
transition: left 0.2s, right 0.2s;
}
.bm_range .bmrg_selected_edge {
position: absolute;
top: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
font-size: 13px;
line-height: 16px;
border-radius: 9px;
transform: translate3d(-50%, 0, 0);
cursor: pointer;
transition: left 0.2s;
touch-action: none;
}
.bm_range .bmrg_selected_edge:after {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
content: "";
}
.bm_range .bmrg_selected_edge.__from {
left: 0;
background: #2b9777;
}
.bm_range .bmrg_selected_edge.__to {
right: 0;
background: #2a96e2;
}
.bm_range .bmrg_selected_edge.__last_active {
z-index: 1;
}
.bm_range .bmrg_label {
position: absolute;
padding: 0 3px;
pointer-events: none;
}
.bm_range .bmrg_label.__selected {
top: -18px;
}
.bm_range .bmrg_label.__selected_from {
left: 50%;
transform: translate3d(-50%, 0, 0);
transition: left 0.3s, transform 0.3s;
}
.bm_range .bmrg_label.__selected_to {
right: 50%;
transform: translate3d(50%, 0, 0);
transition: right 0.3s, transform 0.3s;
}
.bm_range .bmrg_label.__start_from {
left: 0;
transform: translate3d(0, 0, 0);
}
.bm_range .bmrg_label.__start_to {
right: 0;
transform: translate3d(0, 0, 0);
}
.bm_range .bmrg_label.__no_anim {
transition: none;
}
.bm_range .bmrg_label.__from, .bm_range .bmrg_label.__to {
top: 17px;
color: #606771;
font-size: 11px;
}
.bm_range .bmrg_label.__from {
left: 0;
transform: translateX(-50%);
}
.bm_range .bmrg_label.__to {
right: 0;
transform: translateX(50%);
}
.bm_range .bmrg_container {
position: relative;
height: 100%;
}
.bm_range .bmrg_container.__disabled {
pointer-events: none;
}
.bm_range .bmrg_container.__magnetic.__to_left .bmrg_label.__selected_from {
transform: translateX(-100%) translateX(-34px);
}
.bm_range .bmrg_container.__magnetic.__to_left .bmrg_label.__selected_to {
transform: translateX(50%);
}
.bm_range .bmrg_container.__magnetic.__to_right .bmrg_label.__selected_from {
transform: translateX(-50%);
}
.bm_range .bmrg_container.__magnetic.__to_right .bmrg_label.__selected_to {
transform: translateX(100%) translateX(34px);
}
.bm_range .bmrg_container.__magnetic .bmrg_label.__selected_from {
transform: translateX(-100%) translateX(-4px);
}
.bm_range .bmrg_container.__magnetic .bmrg_label.__selected_to {
transform: translateX(100%) translateX(4px);
}
.bm_range .bmrg_container.__start_labels.__to_left .bmrg_label.__selected_from {
transform: translateX(-100%) translateX(-54px);
}
.bm_range .bmrg_container.__start_labels.__to_left .bmrg_label.__start_to {
transform: none;
}
.bm_range .bmrg_container.__start_labels.__to_right .bmrg_label.__selected_to {
transform: translateX(100%) translateX(54px);
}
.bm_range .bmrg_container.__start_labels.__to_right .bmrg_label.__start_from {
transform: none;
}
.bm_range .bmrg_container.__start_labels .bmrg_label.__from {
left: -10px;
transform: none;
}
.bm_range .bmrg_container.__start_labels .bmrg_label.__to {
right: -10px;
transform: none;
}
/**
* Pager component
*
* @prefix:
* - bmp_ = bongamodels pager
* Modifiers:
* .bmp_li.__next - pager next link width arrow
* .bmp_li.__prev - pager previous link width arrow
* .bmp_link.__active - active page
* .bmp_link.__disabled - hide link for next/previous buttons
*
* Usage example:
*
*/
.bm_pager {
position: relative;
padding: 0 30px;
font-weight: 600;
font-size: 12px;
text-align: center;
}
.bm_pager .ui_arrow {
width: 6px;
height: 10px;
}
.bm_pager .bmp_li {
display: inline-block;
margin: 0 2px;
vertical-align: top;
}
.bm_pager .bmp_li.__prev, .bm_pager .bmp_li.__next {
position: absolute;
top: 0;
}
.bm_pager .bmp_li.__prev .bmp_link, .bm_pager .bmp_li.__next .bmp_link {
font-size: 0;
border-color: #e9ebee;
}
.bm_pager .bmp_li.__prev .bmp_link:hover, .bm_pager .bmp_li.__next .bmp_link:hover {
border-color: #2a96e2;
}
.bm_pager .bmp_li.__prev .bmp_link.__disabled, .bm_pager .bmp_li.__next .bmp_link.__disabled {
display: none;
}
.bm_pager .bmp_li.__prev {
left: 0;
}
.bm_pager .bmp_li.__next {
right: 0;
}
.bm_pager .bmp_li.__next .ui_arrow {
transform: rotate(180deg);
}
.bm_pager .bmp_link {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 28px;
height: 28px;
min-height: 28px;
padding: 7px;
color: #606771;
font-weight: 600;
text-decoration: none;
border: 1px transparent solid;
border-radius: 14px;
}
.bm_pager .bmp_link:hover {
color: #2a96e2;
border-color: #2a96e2;
}
.bm_pager .bmp_link:hover .ui_arrow {
color: #2a96e2;
}
.bm_pager .bmp_link.__active {
color: #2a96e2;
border-color: #e9ebee;
pointer-events: none;
}
.bm_pager .bmp_link .ui_arrow {
color: #9ba2ac;
}
.bm_pager .bmp_dots {
display: block;
margin: 0 10px;
}
/**
* Dummy Tabs component - absolutely BASIC styles.
*
* NOT CHANGE THIS FILE ! Make customization in other files
*
* @prefix:
* - dyt_ = bm_dummy_tabs
*
* Modifiers:
* .bm_dummy_tabs.__dyt_top - tabs position - top (by default)
* .bm_dummy_tabs.__dyt_bottom - tabs position - bottom
* .bm_dummy_tabs.__dyt_left - tabs position - left TODO: no styles
* .bm_dummy_tabs.__dyt_right - tabs position - right TODO: no styles
* .bm_dummy_tabs.__dyt_tall - full height stretching
* .bm_dummy_tabs.__dyt_overwhelm - fixing bug, when tab's children is overwhelming parent
* .dyt_tab.__tab_active - active tab
*/
/* dummy tabs */
.bm_dummy_tabs {
display: flex;
flex-direction: column;
}
.bm_dummy_tabs.__dyt_bottom {
flex-direction: column-reverse;
}
.bm_dummy_tabs.__dyt_tall {
flex: 1 1 auto;
height: 100%;
}
.bm_dummy_tabs.__dyt_tall .dyt_content {
flex: 1 1 auto;
height: 100%;
min-height: 1px; /* IE11 flex hack */
}
.bm_dummy_tabs.__dyt_overwhelm {
height: 0;
}
.bm_dummy_tabs .dyt_list {
display: flex;
flex-flow: row nowrap;
}
.bm_dummy_tabs .dyt_tab {
position: relative;
display: flex;
align-items: center;
text-decoration: none;
cursor: pointer;
user-select: none;
}
.bm_dummy_tabs .dyt_tab.__tab_active {
background-color: #fff;
cursor: default;
}
.bm_dummy_tabs .dyt_tab .dyt_title {
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 100%;
font-weight: 700;
font-size: 14px;
line-height: 1.1;
}
.bm_dummy_tabs .dyt_content {
background-color: #fff;
}
/**
* Dummy Accordion - absolutely BASIC styles.
*
* NOT CHANGE THIS FILE ! Make customization in other files
*
* @prefix:
* - dan_ = .dummy_accordion
*
* Modifiers:
* .chat_accordion.__dan_tall = full height accordion
* .dan_tab.__dan_collapsing = collapsing state of dummy accordion tab
* .dan_tab.__dan_expanded = expanded state of dummy accordion tab
* .dan_tab.__dan_static = static state of dummy accordion tab, for first render
* .dan_tab.__dan_anim = animated state of dummy accordion tab
*/
.dummy_accordion {
display: flex;
flex-flow: column nowrap;
}
.dummy_accordion.__dan_tall {
flex: 1 1 auto;
height: 100%;
}
.dummy_accordion.__dan_tall .dan_tab {
flex: 0 0 auto;
}
.dummy_accordion.__dan_tall .dan_tab.__dan_expanded {
flex: 1 0 auto; /* flex-shrink = 0 for safari */
}
.dummy_accordion.__dan_static.__dan_anim .dan_tab .dan_body {
transition: none;
}
.dummy_accordion.__dan_anim .dan_tab .dan_body {
max-height: 0;
opacity: 0;
transition: max-height 0.3s, opacity 0.3s;
}
.dummy_accordion .dan_tab {
display: flex;
flex-flow: column nowrap;
}
.dummy_accordion .dan_tab.__dan_active_off.__dan_expanded .dan_head {
cursor: default;
}
.dummy_accordion .dan_tab.__dan_expanded .dan_body {
opacity: 1;
}
.dummy_accordion .dan_tab.__dan_collapsing .dan_body {
max-height: 0;
opacity: 0;
}
.dummy_accordion .dan_head {
flex: 0 0 auto;
user-select: none;
}
.dummy_accordion .dan_body {
flex: 1 1 auto;
overflow: hidden;
}
/**
* @see: UI Style Guide
*/
/**
* @see: UI Style Guide
*
* Close Icon
*
* Modifiers:
* .__hover - hover icon = :hover state
* .__disabled - disabled icon
*/
.bm_icon_close {
width: 27px;
height: 28px;
color: #9ba2ac;
cursor: pointer;
transition: all 0.2s ease;
stroke-opacity: 0.3;
fill: none;
}
.bm_icon_close.__hover {
color: #2a96e2;
stroke-opacity: 1;
}
.bm_icon_close.__disabled {
color: #9ba2ac;
pointer-events: none;
fill: #f7f7f8;
stroke-opacity: 0;
}
/**
* utils need be import in last position
*/
/**
* Flex helper classes
*/
.bm_flex {
display: flex;
/* vertical and horizontal center */
}
.bm_flex.__fx_inline {
display: inline-flex;
}
.bm_flex.__fx_hide {
display: none;
}
.bm_flex.__ja_center {
justify-content: center;
align-items: center;
}
.bm_flex.__fd_r {
flex-direction: row;
}
.bm_flex.__fd_rr {
flex-direction: row-reverse;
}
.bm_flex.__fd_c {
flex-direction: column;
}
.bm_flex.__fd_cr {
flex-direction: column-reverse;
}
.bm_flex.__fw_n {
flex-wrap: nowrap;
}
.bm_flex.__fw_w {
flex-wrap: wrap;
}
.bm_flex.__fw_wr {
flex-wrap: wrap-reverse;
}
.bm_flex.__ff_rn {
flex-flow: row nowrap;
}
.bm_flex.__ff_rw {
flex-flow: row wrap;
}
.bm_flex.__jc_fs {
justify-content: flex-start;
}
.bm_flex.__jc_fe {
justify-content: flex-end;
}
.bm_flex.__jc_c {
justify-content: center;
}
.bm_flex.__jc_sb {
justify-content: space-between;
}
.bm_flex.__jc_sa {
justify-content: space-around;
}
.bm_flex.__ai_s {
align-items: stretch;
}
.bm_flex.__ai_fs {
align-items: flex-start;
}
.bm_flex.__ai_fe {
align-items: flex-end;
}
.bm_flex.__ai_c {
align-items: center;
}
.bm_flex.__ai_b {
align-items: baseline;
}
.bm_flex.__ac_s {
align-content: stretch;
}
.bm_flex.__ac_fs {
align-content: flex-start;
}
.bm_flex.__ac_fe {
align-content: flex-end;
}
.bm_flex.__ac_c {
align-content: center;
}
.bm_flex.__ac_sb {
align-content: space-between;
}
.bm_flex.__ac_sa {
align-content: space-around;
}
.bm_flex.__fb_100 {
flex-basis: 100%;
}
.bm_stretch_height {
flex: 1 1 auto;
}
/**
* Small help classes
*/
/* region text utils */
.bm_brand_color {
color: #6c133b;
}
/* Title color */
.bm_serious_color {
color: #81003a;
}
.bm_primary_color {
color: #2a96e2;
}
.bm_success_color {
color: #17ae45;
}
.bm_danger_color {
color: #e50000;
}
.bm_warning_color {
color: #ffc600;
}
.bm_ordinary_color {
color: #353c46;
}
.bm_regular {
font-weight: 400;
}
.bm_medium {
font-weight: 500;
}
.bm_sbold {
font-weight: 600;
}
.bm_bold {
font-weight: 700;
}
.bm_ebold {
font-weight: 800;
}
.bm_em {
font-style: italic;
}
.bm_hide {
display: none;
}
.bm_hide.__block {
display: block;
}
.bm_relative {
position: relative;
}
.bm_absolute {
position: absolute;
}
.bm_mt_auto {
margin-top: auto;
}
.bm_mr_auto {
margin-right: auto;
}
.bm_mb_auto {
margin-bottom: auto;
}
.bm_ml_auto {
margin-left: auto;
}
.bm_uppercase {
text-transform: uppercase;
}
.bm_lowercase {
text-transform: lowercase;
}
.bm_capitalize {
text-transform: capitalize;
}
.bm_border_box {
box-sizing: border-box;
}
.bm_txt_left {
text-align: left;
}
.bm_txt_center {
text-align: center;
}
.bm_txt_right {
text-align: right;
}
.bm_td_none {
text-decoration: none;
}
.bm_td_line_through {
text-decoration: line-through;
}
.bm_td_underline {
text-decoration: underline;
}
.bm_rounded {
border-radius: 50%;
}
.bm_none_events {
user-select: none;
pointer-events: none;
}
.bm_all_events {
user-select: auto;
pointer-events: all;
}
.bm_none_select {
user-select: none;
}
.bm_nowrap {
white-space: nowrap;
}
.bm_pre_line {
white-space: pre-line;
}
.bm_tilde {
/* for fix Open Sans bug @see: https://github.com/google/fonts/issues/399 */
font-style: italic;
}
.bm_svg {
position: relative;
display: inline-block;
color: inherit;
vertical-align: middle;
background-color: transparent;
pointer-events: none;
fill: currentColor;
stroke: currentColor;
stroke-width: 0;
}
/* region text utils */
/* region table */
.bm_tbl {
display: table;
}
.bm_tbl_cell {
display: table-cell;
}
.bm_tbl_row {
display: table-row;
}
/* endregion table */
.bm_block {
display: block;
}
.bm_block.__hide {
display: none;
}
.bm_iblock {
display: inline-block;
}
.bm_iblock.__hide {
display: none;
}
.bm_inline {
display: inline;
}
.bm_text_ellipsis {
display: inline-block;
min-width: 1px;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
/* region clearfix */
.clr:after {
content: " ";
display: block;
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
}
/* endregion clearfix */
/*
* region text img
* region for all replaced words to images ex: company address
*/
.bm_text_img {
display: inline;
vertical-align: middle;
}
.bm_text_img.__upper {
vertical-align: baseline;
}
/* endregion text img */
/* region visually hidden */
.bm_visually_hidden {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
white-space: nowrap;
position: absolute;
}
/* endregion visually hidden */
/**
* Emoticons (Apple view)
*
* Modifier = CLDR Short Name
*/
.bm_emoticon {
display: inline-block;
width: 16px;
height: 16px;
background-size: cover;
}