Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F4113416
codex.style-rtl.css
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
110 KB
Referenced Files
None
Subscribers
None
codex.style-rtl.css
View Options
.
cdx-icon
{
color
:
var
(
--color-base
,
#202122
);
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
vertical-align
:
text
-
bottom
}.
cdx-icon
svg
{
fill
:
currentcolor
;
width
:
100
%
;
height
:
100
%
}.
cdx-icon--x-small
{
min-width
:
12
px
;
min-height
:
12
px
;
width
:
.75
rem
;
height
:
.75
rem
}.
cdx-icon--small
{
min-width
:
16
px
;
min-height
:
16
px
;
width
:
1
rem
;
height
:
1
rem
}.
cdx-icon--medium
{
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
}.
cdx-icon--flipped
svg
{
transform
:
scaleX
(
-1
)}.
cdx-button
{
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
4
px
;
box-sizing
:
border-box
;
min-height
:
32
px
;
max-width
:
28
rem
;
margin
:
0
;
border-width
:
1
px
;
border-style
:
solid
;
border-radius
:
2
px
;
padding-left
:
11
px
;
padding-right
:
11
px
;
font-family
:
inherit
;
font-size
:
inherit
;
font-weight
:
700
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
text-transform
:
none
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}.
cdx-button--size-large
{
min-height
:
44
px
;
padding-left
:
15
px
;
padding-right
:
15
px
}.
cdx-button--icon-only
{
min-width
:
32
px
;
padding-left
:
5
px
;
padding-right
:
5
px
}.
cdx-button--icon-only
.
cdx-button--size-large
{
min-width
:
44
px
;
padding-left
:
11
px
;
padding-right
:
11
px
}.
cdx-button
::
-moz-focus-inner
{
border
:
0
;
padding
:
0
}.
cdx-button
.
cdx-button__icon
,
.
cdx-button
.
cdx-icon
{
vertical-align
:
middle
}.
cdx-button
.
cdx-icon
{
color
:
inherit
}.
cdx-button--fake-button
,
.
cdx-button--fake-button
:
hover
,
.
cdx-button--fake-button
:
focus
{
text-decoration
:
none
}.
cdx-button
:
enabled
,
.
cdx-button
.
cdx-button--fake-button--enabled
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
color
:
var
(
--color-base
,
#202122
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button__icon
{
background-color
:
var
(
--color-base
,
#202122
)}}.
cdx-button
:
enabled
:
hover
,
.
cdx-button
.
cdx-button--fake-button--enabled
:
hover
{
background-color
:
var
(
--background-color-base
,
#fff
);
color
:
var
(
--color-base--hover
,
#404244
);
cursor
:
pointer
}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
:
hover
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
:
hover
.
cdx-button__icon
{
background-color
:
var
(
--color-base--hover
,
#404244
)}}.
cdx-button
:
enabled
:
active
,
.
cdx-button
.
cdx-button--fake-button--enabled
:
active
,
.
cdx-button
:
enabled
.
cdx-button--is-active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--is-active
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
);
color
:
var
(
--color-emphasized
,
#101418
);
border-color
:
var
(
--border-color-interactive
,
#72777d
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
:
active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
:
active
.
cdx-button__icon
,
.
cdx-button
:
enabled
.
cdx-button--is-active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--is-active
.
cdx-button__icon
{
background-color
:
var
(
--color-emphasized
,
#101418
)}}.
cdx-button
:
enabled
:
focus
,
.
cdx-button
.
cdx-button--fake-button--enabled
:
focus
{
outline
:
1
px
solid
transparent
}.
cdx-button
:
enabled
:
focus
:
not
(
:
active
)
:
not
(
.
cdx-button--is-active
),
.
cdx-button
.
cdx-button--fake-button--enabled
:
focus
:
not
(
:
active
)
:
not
(
.
cdx-button--is-active
)
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
)}.
cdx-button
:
enabled
.
cdx-button--action-progressive
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-progressive
{
color
:
var
(
--color-progressive
,
#36c
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--action-progressive
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-progressive
.
cdx-button__icon
{
background-color
:
var
(
--color-progressive
,
#36c
)}}.
cdx-button
:
enabled
.
cdx-button--action-progressive
:
hover
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-progressive
:
hover
{
color
:
var
(
--color-progressive--hover
,
#4b77d6
);
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--action-progressive
:
hover
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-progressive
:
hover
.
cdx-button__icon
{
background-color
:
var
(
--color-progressive--hover
,
#4b77d6
)}}.
cdx-button
:
enabled
.
cdx-button--action-progressive
:
active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-progressive
:
active
,
.
cdx-button
:
enabled
.
cdx-button--action-progressive
.
cdx-button--is-active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-progressive
.
cdx-button--is-active
{
background-color
:
var
(
--background-color-progressive-subtle
,
#f1f4fd
);
color
:
var
(
--color-progressive--active
,
#233566
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--action-progressive
:
active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-progressive
:
active
.
cdx-button__icon
,
.
cdx-button
:
enabled
.
cdx-button--action-progressive
.
cdx-button--is-active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-progressive
.
cdx-button--is-active
.
cdx-button__icon
{
background-color
:
var
(
--color-progressive--active
,
#233566
)}}.
cdx-button
:
enabled
.
cdx-button--action-destructive
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-destructive
{
color
:
var
(
--color-destructive
,
#d73333
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--action-destructive
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-destructive
.
cdx-button__icon
{
background-color
:
var
(
--color-destructive
,
#d73333
)}}.
cdx-button
:
enabled
.
cdx-button--action-destructive
:
hover
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-destructive
:
hover
{
color
:
var
(
--color-destructive--hover
,
#fc493b
);
border-color
:
var
(
--border-color-destructive--hover
,
#fc493b
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--action-destructive
:
hover
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-destructive
:
hover
.
cdx-button__icon
{
background-color
:
var
(
--color-destructive--hover
,
#fc493b
)}}.
cdx-button
:
enabled
.
cdx-button--action-destructive
:
active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-destructive
:
active
,
.
cdx-button
:
enabled
.
cdx-button--action-destructive
.
cdx-button--is-active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-destructive
.
cdx-button--is-active
{
background-color
:
var
(
--background-color-destructive-subtle
,
#ffe9e5
);
color
:
var
(
--color-destructive--active
,
#9f3526
);
border-color
:
var
(
--border-color-destructive--active
,
#9f3526
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--action-destructive
:
active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-destructive
:
active
.
cdx-button__icon
,
.
cdx-button
:
enabled
.
cdx-button--action-destructive
.
cdx-button--is-active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-destructive
.
cdx-button--is-active
.
cdx-button__icon
{
background-color
:
var
(
--color-destructive--active
,
#9f3526
)}}.
cdx-button
:
enabled
.
cdx-button--action-destructive
:
focus
:
not
(
:
active
)
:
not
(
.
cdx-button--is-active
),
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--action-destructive
:
focus
:
not
(
:
active
)
:
not
(
.
cdx-button--is-active
)
{
border-color
:
var
(
--border-color-destructive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-destructive--focus
,
#36c
)}.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
{
background-color
:
var
(
--background-color-progressive
,
#36c
);
color
:
var
(
--color-inverted-fixed
,
#fff
);
border-color
:
var
(
--border-color-progressive
,
#36c
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-button__icon
{
background-color
:
var
(
--color-inverted-fixed
,
#fff
)}}.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
:
hover
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
:
hover
{
background-color
:
var
(
--background-color-progressive--hover
,
#4b77d6
);
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
:
hover
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
:
hover
.
cdx-button__icon
{
background-color
:
var
(
--color-inverted-fixed
,
#fff
)}}.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
:
active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
:
active
,
.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-button--is-active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-button--is-active
{
background-color
:
var
(
--background-color-progressive--active
,
#233566
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
:
active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
:
active
.
cdx-button__icon
,
.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-button--is-active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-button--is-active
.
cdx-button__icon
{
background-color
:
var
(
--color-inverted-fixed
,
#fff
)}}.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
:
focus
:
not
(
:
active
)
:
not
(
.
cdx-button--is-active
),
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-progressive
:
focus
:
not
(
:
active
)
:
not
(
.
cdx-button--is-active
)
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
),
inset
0
0
0
2
px
var
(
--box-shadow-color-inverted
,
#fff
)}.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
{
background-color
:
var
(
--background-color-destructive
,
#d73333
);
color
:
var
(
--color-inverted-fixed
,
#fff
);
border-color
:
var
(
--border-color-destructive
,
#d73333
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-button__icon
{
background-color
:
var
(
--color-inverted-fixed
,
#fff
)}}.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
:
hover
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
:
hover
{
background-color
:
var
(
--background-color-destructive--hover
,
#fc493b
);
border-color
:
var
(
--border-color-destructive--hover
,
#fc493b
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
:
hover
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
:
hover
.
cdx-button__icon
{
background-color
:
var
(
--color-inverted-fixed
,
#fff
)}}.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
:
active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
:
active
,
.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-button--is-active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-button--is-active
{
background-color
:
var
(
--background-color-destructive--active
,
#9f3526
);
border-color
:
var
(
--border-color-destructive--active
,
#9f3526
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
:
active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
:
active
.
cdx-button__icon
,
.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-button--is-active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-button--is-active
.
cdx-button__icon
{
background-color
:
var
(
--color-inverted-fixed
,
#fff
)}}.
cdx-button
:
enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
:
focus
:
not
(
:
active
)
:
not
(
.
cdx-button--is-active
),
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-primary
.
cdx-button--action-destructive
:
focus
:
not
(
:
active
)
:
not
(
.
cdx-button--is-active
)
{
border-color
:
var
(
--border-color-destructive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-destructive--focus
,
#36c
),
inset
0
0
0
2
px
var
(
--box-shadow-color-inverted
,
#fff
)}.
cdx-button
:
enabled
.
cdx-button--weight-quiet
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
border-color
:
var
(
--border-color-transparent
,
transparent
)}.
cdx-button
:
enabled
.
cdx-button--weight-quiet
:
hover
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
:
hover
{
background-color
:
var
(
--background-color-button-quiet--hover
,
rgba
(
0
,
24
,
73
,
.027
))}.
cdx-button
:
enabled
.
cdx-button--weight-quiet
:
active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
:
active
,
.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--is-active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--is-active
{
background-color
:
var
(
--background-color-button-quiet--active
,
rgba
(
0
,
24
,
73
,
.082
));
color
:
var
(
--color-emphasized
,
#101418
);
border-color
:
var
(
--border-color-interactive
,
#72777d
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-quiet
:
active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
:
active
.
cdx-button__icon
,
.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--is-active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--is-active
.
cdx-button__icon
{
background-color
:
var
(
--color-emphasized
,
#101418
)}}.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
{
color
:
var
(
--color-progressive
,
#36c
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
.
cdx-button__icon
{
background-color
:
var
(
--color-progressive
,
#36c
)}}.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
:
hover
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
:
hover
{
background-color
:
var
(
--background-color-progressive-subtle
,
#f1f4fd
);
color
:
var
(
--color-progressive--hover
,
#4b77d6
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
:
hover
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
:
hover
.
cdx-button__icon
{
background-color
:
var
(
--color-progressive--hover
,
#4b77d6
)}}.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
:
active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
:
active
,
.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
.
cdx-button--is-active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
.
cdx-button--is-active
{
background-color
:
var
(
--background-color-progressive--active
,
#233566
);
color
:
var
(
--color-inverted-fixed
,
#fff
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
:
active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
:
active
.
cdx-button__icon
,
.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
.
cdx-button--is-active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-progressive
.
cdx-button--is-active
.
cdx-button__icon
{
background-color
:
var
(
--color-inverted
,
#fff
)}}.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
{
color
:
var
(
--color-destructive
,
#d73333
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
.
cdx-button__icon
{
background-color
:
var
(
--color-destructive
,
#d73333
)}}.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
:
hover
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
:
hover
{
background-color
:
var
(
--background-color-destructive-subtle
,
#ffe9e5
);
color
:
var
(
--color-destructive--hover
,
#fc493b
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
:
hover
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
:
hover
.
cdx-button__icon
{
background-color
:
var
(
--color-destructive--hover
,
#fc493b
)}}.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
:
active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
:
active
,
.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
.
cdx-button--is-active
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
.
cdx-button--is-active
{
background-color
:
var
(
--background-color-destructive--active
,
#9f3526
);
color
:
var
(
--color-inverted-fixed
,
#fff
);
border-color
:
var
(
--border-color-destructive--active
,
#9f3526
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
:
active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
:
active
.
cdx-button__icon
,
.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
.
cdx-button--is-active
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
.
cdx-button--is-active
.
cdx-button__icon
{
background-color
:
var
(
--color-inverted
,
#fff
)}}.
cdx-button
:
enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
:
focus
:
not
(
:
active
)
:
not
(
.
cdx-button--is-active
),
.
cdx-button
.
cdx-button--fake-button--enabled
.
cdx-button--weight-quiet
.
cdx-button--action-destructive
:
focus
:
not
(
:
active
)
:
not
(
.
cdx-button--is-active
)
{
border-color
:
var
(
--border-color-destructive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-destructive--focus
,
#36c
)}.
cdx-button
:
disabled
,
.
cdx-button
.
cdx-button--fake-button--disabled
{
background-color
:
var
(
--background-color-disabled
,
#c8ccd1
);
color
:
var
(
--color-inverted
,
#fff
);
border-color
:
var
(
--border-color-transparent
,
transparent
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
disabled
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--disabled
.
cdx-button__icon
{
background-color
:
var
(
--color-inverted
,
#fff
)}}.
cdx-button
:
disabled
.
cdx-button--weight-quiet
,
.
cdx-button
.
cdx-button--fake-button--disabled
.
cdx-button--weight-quiet
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
color
:
var
(
--color-disabled
,
#72777d
)}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-button
:
disabled
.
cdx-button--weight-quiet
.
cdx-button__icon
,
.
cdx-button
.
cdx-button--fake-button--disabled
.
cdx-button--weight-quiet
.
cdx-button__icon
{
background-color
:
var
(
--color-disabled
,
#72777d
)}}.
cdx-accordion
{
position
:
relative
;
border-bottom
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
)}.
cdx-accordion
>
summary
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
list-style
:
none
;
display
:
flex
;
gap
:
8
px
;
border-width
:
1
px
;
border-style
:
solid
;
border-color
:
var
(
--border-color-transparent
,
transparent
);
border-radius
:
0
;
padding
:
12
px
;
word-break
:
break-word
;
white-space
:
normal
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
;
transition-timing-function
:
ease
}.
cdx-accordion
>
summary
:
hover
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
cursor
:
pointer
}.
cdx-accordion
>
summary
:
active
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
)}.
cdx-accordion
>
summary
:
focus-visible
{
box-shadow
:
inset
0
0
0
2
px
var
(
--border-color-progressive
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-accordion
>
summary
:
focus
:
not
(
:
active
)
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
)}.
cdx-accordion
>
summary
::
-webkit-details-marker
{
display
:
none
}.
cdx-accordion
.
cdx-accordion__header
{
position
:
relative
;
margin-top
:
0
;
margin-bottom
:
0
;
border-top
:
0
;
padding-top
:
0
;
padding-bottom
:
0
;
font-size
:
1
rem
}.
cdx-accordion
.
cdx-accordion__header__title
{
display
:
flex
;
gap
:
8
px
;
line-height
:
1.375
}.
cdx-accordion
.
cdx-accordion__header__description
{
color
:
var
(
--color-subtle
,
#54595d
);
display
:
flex
;
font-weight
:
400
;
line-height
:
1.375
;
pointer-events
:
none
}.
cdx-accordion__action
.
cdx-button
{
display
:
flex
;
align-items
:
center
;
position
:
absolute
;
top
:
0
;
left
:
0
;
height
:
calc
(
1.375
em
+
26
px
);
padding-left
:
12
px
;
padding-right
:
12
px
;
font-size
:
1
rem
}.
cdx-accordion__action
.
cdx-button
:
hover
{
background-color
:
unset
}.
cdx-accordion__content
{
padding
:
8
px
12
px
12
px
;
font-size
:
1
rem
}.
cdx-accordion
>
summary
:
before
{
content
:
""
;
min-width
:
16
px
;
min-height
:
16
px
;
width
:
1
rem
;
height
:
1
rem
;
display
:
inline-block
;
vertical-align
:
text
-
bottom
;
height
:
1.375
em
;
transition-property
:
background-color
,
border-color
,
transform
;
transition-duration
:
.25
s
;
transition-timing-function
:
ease
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-accordion
>
summary
:
before
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
1
rem
,
16
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-accordion
>
summary
:
before
{
-webkit-
mask-size
:
max
(
1
rem
,
16
px
);
mask-size
:
max
(
1
rem
,
16
px
);
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-position
:
center
;
mask-position
:
center
}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-accordion
>
summary
:
before
{
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z"/></svg>'
);
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}.
cdx-button
:
not
(
.
cdx-button--weight-quiet
)
:
disabled
.
cdx-accordion
>
summary
:
before
,
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-accordion
>
summary
:
before
,
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-accordion
>
summary
:
before
{
filter
:
invert
(
var
(
--filter-invert-primary-button-icon
,
1
))}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-accordion
>
summary
:
before
{
-webkit-
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z"/></svg>'
);
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z"/></svg>'
);
background-color
:
var
(
--color-base
,
#202122
)}}.
cdx-accordion
[
open
]>
summary
:
before
{
transform
:
rotate
(
180
deg
)}.
cdx-button-group
{
position
:
relative
;
z-index
:
0
;
width
:
-webkit-
fit-content
;
width
:
-moz-
fit-content
;
width
:
fit-content
;
border-radius
:
2
px
;
padding-top
:
1
px
;
padding-right
:
1
px
;
overflow
:
hidden
}.
cdx-button-group
.
cdx-button
{
position
:
relative
;
z-index
:
1
;
margin-top
:
-1
px
;
margin-right
:
-1
px
;
border-radius
:
0
}.
cdx-button-group
.
cdx-button
:
enabled
:
active
,
.
cdx-button-group
.
cdx-button
:
enabled
:
focus
{
z-index
:
3
}.
cdx-button-group
.
cdx-button
:
disabled
{
z-index
:
0
;
box-shadow
:
0
-1
px
0
0
var
(
--box-shadow-color-inverted
,
#fff
),
1
px
0
0
0
var
(
--box-shadow-color-inverted
,
#fff
)}.
cdx-thumbnail
{
display
:
inline-flex
}.
cdx-thumbnail__placeholder
,
.
cdx-thumbnail__image
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
cover
;
flex-shrink
:
0
;
box-sizing
:
border-box
;
min-width
:
40
px
;
min-height
:
40
px
;
width
:
2.5
rem
;
height
:
2.5
rem
;
border
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
);
border-radius
:
2
px
}.
cdx-thumbnail__image
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
display
:
inline-block
}.
cdx-thumbnail__image-enter-active
{
transition-property
:
opacity
;
transition-duration
:
.1
s
}.
cdx-thumbnail__image-enter-from
{
opacity
:
0
}.
cdx-thumbnail__placeholder
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
}.
cdx-thumbnail__placeholder__icon
{
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-thumbnail__placeholder__icon
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
1.25
rem
,
20
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-thumbnail__placeholder__icon
{
-webkit-
mask-size
:
max
(
1.25
rem
,
20
px
);
mask-size
:
max
(
1.25
rem
,
20
px
);
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-position
:
center
;
mask-position
:
center
}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-thumbnail__placeholder__icon
{
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M19 3H1v14h18zM3 14l3.5-4.5 2.5 3L12.5 8l4.5 6z"/><path d="M19 5H1V3h18zm0 12H1v-2h18z"/></svg>'
);
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}.
cdx-button
:
not
(
.
cdx-button--weight-quiet
)
:
disabled
.
cdx-thumbnail__placeholder__icon
,
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-thumbnail__placeholder__icon
,
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-thumbnail__placeholder__icon
{
filter
:
invert
(
var
(
--filter-invert-primary-button-icon
,
1
))}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-thumbnail__placeholder__icon
{
-webkit-
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M19 3H1v14h18zM3 14l3.5-4.5 2.5 3L12.5 8l4.5 6z"/><path d="M19 5H1V3h18zm0 12H1v-2h18z"/></svg>'
);
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M19 3H1v14h18zM3 14l3.5-4.5 2.5 3L12.5 8l4.5 6z"/><path d="M19 5H1V3h18zm0 12H1v-2h18z"/></svg>'
);
background-color
:
var
(
--color-placeholder
,
#72777d
)}}.
cdx-thumbnail__placeholder__icon--vue
.
cdx-icon
{
color
:
var
(
--color-placeholder
,
#72777d
)}.
cdx-card
{
background-color
:
var
(
--background-color-base
,
#fff
);
display
:
flex
;
align-items
:
flex-start
;
position
:
relative
;
border
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
);
border-radius
:
2
px
;
padding
:
12
px
}.
cdx-card--is-link
{
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}.
cdx-card--is-link
,
.
cdx-card--is-link
:
hover
,
.
cdx-card--is-link
:
focus
{
text-decoration
:
none
}.
cdx-card--is-link
:
hover
{
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-card--is-link
:
focus
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
),
inset
0
0
0
2
px
var
(
--box-shadow-color-inverted
,
#fff
);
outline
:
1
px
solid
transparent
}.
cdx-card--title-only
{
align-items
:
center
}.
cdx-card__text
{
display
:
flex
;
flex-direction
:
column
;
line-height
:
1.5714285
;
word-wrap
:
break-word
;
-webkit-
hyphens
:
auto
;
-ms-
hyphens
:
auto
;
hyphens
:
auto
}.
cdx-card__text__title
{
color
:
var
(
--color-base
,
#202122
);
font-weight
:
700
;
line-height
:
1.4285714
}.
cdx-card__text__description
,
.
cdx-card__text__supporting-text
,
.
cdx-card__text__description
.
cdx-icon
,
.
cdx-card__text__supporting-text
.
cdx-icon
{
color
:
var
(
--color-subtle
,
#54595d
)}.
cdx-card__text__description
{
margin-top
:
4
px
}.
cdx-card__text__supporting-text
{
margin-top
:
8
px
;
font-size
:
.875
rem
}.
cdx-card__thumbnail
.
cdx-thumbnail
{
margin-left
:
12
px
}.
cdx-card__thumbnail
.
cdx-thumbnail
.
cdx-thumbnail__placeholder
,
.
cdx-card__thumbnail
.
cdx-thumbnail
.
cdx-thumbnail__image
{
width
:
3
rem
;
height
:
3
rem
}.
cdx-card
.
cdx-card__icon
{
color
:
inherit
;
margin-left
:
12
px
}.
cdx-label
{
display
:
flex
;
flex-direction
:
column
;
line-height
:
1.375
}.
cdx-label__label__icon
.
cdx-icon
{
margin-left
:
4
px
}.
cdx-label__label__text
{
font-weight
:
700
}
legend
.
cdx-label
{
padding
:
0
}
fieldset
label
.
cdx-label__label
.
cdx-label__label__text
{
font-weight
:
400
}.
cdx-label
:
not
(
.
cdx-label--disabled
)
.
cdx-label__label__optional-flag
,
.
cdx-label
:
not
(
.
cdx-label--disabled
)
.
cdx-label__description
{
color
:
var
(
--color-subtle
,
#54595d
)}.
cdx-label--disabled
,
.
cdx-label--disabled
.
cdx-label__label__icon
{
color
:
var
(
--color-disabled
,
#72777d
)}.
cdx-label--visually-hidden
{
display
:
block
;
clip
:
rect
(
1
px
,
1
px
,
1
px
,
1
px
);
position
:
absolute
!important
;
width
:
1
px
;
height
:
1
px
;
margin
:
-1
px
;
border
:
0
;
padding
:
0
;
overflow
:
hidden
}.
cdx-label
:
not
(
.
cdx-label--visually-hidden
)
{
padding-bottom
:
8
px
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-label
:
not
(
.
cdx-label--visually-hidden
)
{
padding-bottom
:
4
px
}}.
cdx-checkbox
{
position
:
relative
;
min-width
:
20
px
;
min-height
:
20
px
}.
cdx-checkbox__wrapper
{
display
:
flex
}.
cdx-checkbox
:
not
(
.
cdx-checkbox--inline
)
{
display
:
flex
;
flex-direction
:
column
;
margin-bottom
:
12
px
}.
cdx-checkbox
:
not
(
.
cdx-checkbox--inline
)
:
last-child
{
margin-bottom
:
0
}.
cdx-checkbox--inline
{
display
:
inline-flex
;
margin-left
:
16
px
;
white-space
:
nowrap
}.
cdx-checkbox--inline
:
last-child
{
margin-left
:
0
}.
cdx-checkbox__label
,
.
cdx-checkbox__label
.
cdx-label
{
display
:
inline-flex
;
position
:
relative
;
z-index
:
0
;
padding-right
:
calc
(
1.25
rem
+
8
px
);
line-height
:
1.4285714
}.
cdx-checkbox__label
.
cdx-label
{
padding-bottom
:
0
}.
cdx-checkbox__label
.
cdx-label
.
cdx-label__label__text
{
font-weight
:
400
}.
cdx-checkbox--inline
.
cdx-checkbox__label
{
display
:
inline
}.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
position
:
absolute
;
right
:
0
;
box-sizing
:
border-box
;
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
border-width
:
1
px
;
border-style
:
solid
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}.
cdx-checkbox__input
{
opacity
:
0
;
position
:
absolute
;
right
:
0
;
z-index
:
1
;
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
margin
:
0
;
font-size
:
inherit
;
cursor
:
inherit
}.
cdx-checkbox
:
hover
>
.
cdx-checkbox__input
:
enabled
,
.
cdx-checkbox
:
hover
>
.
cdx-checkbox__input
:
enabled
~
.
cdx-label
.
cdx-label__label
,
.
cdx-checkbox
:
hover
>
.
cdx-checkbox__input
:
enabled
~
.
cdx-checkbox__label
:
not
(
.
cdx-label
)
{
cursor
:
pointer
}.
cdx-checkbox__custom-input
:
not
(
.
cdx-checkbox__custom-input--inline
)
{
padding-top
:
6
px
;
padding-right
:
calc
(
1.25
rem
+
8
px
)}.
cdx-checkbox__icon
{
background-size
:
0
0
;
border-radius
:
2
px
}.
cdx-checkbox__input
:
indeterminate
+
.
cdx-checkbox__icon
:
before
{
content
:
" "
;
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
position
:
absolute
;
top
:
calc
(
50
%
-
.5
px
);
left
:
3
px
;
right
:
3
px
;
height
:
2
px
}.
cdx-checkbox__input
:
checked
:
not
(
:
indeterminate
)+
.
cdx-checkbox__icon
:
before
{
content
:
" "
;
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23fff" d="M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z"/></svg>'
);
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
1
rem
1
rem
;
position
:
absolute
;
width
:
100
%
;
height
:
100
%
}.
cdx-checkbox__input
:
enabled
+
.
cdx-checkbox__icon
{
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-checkbox__input
:
enabled
:
hover
+
.
cdx-checkbox__icon
{
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-checkbox__input
:
enabled
:
active
+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-progressive--active
,
#233566
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-checkbox__input
:
enabled
:
focus
:
not
(
:
active
)+
.
cdx-checkbox__icon
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-checkbox__input
:
enabled
:
checked
+
.
cdx-checkbox__icon
,
.
cdx-checkbox__input
:
enabled
:
indeterminate
+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-input-binary--checked
,
#36c
);
border-color
:
var
(
--border-color-progressive
,
#36c
)}.
cdx-checkbox__input
:
enabled
:
checked
:
hover
+
.
cdx-checkbox__icon
,
.
cdx-checkbox__input
:
enabled
:
indeterminate
:
hover
+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-progressive--hover
,
#4b77d6
);
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-checkbox__input
:
enabled
:
checked
:
active
+
.
cdx-checkbox__icon
,
.
cdx-checkbox__input
:
enabled
:
indeterminate
:
active
+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-progressive--active
,
#233566
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-checkbox__input
:
enabled
:
checked
:
focus
:
not
(
:
active
)
:
not
(
:
hover
)+
.
cdx-checkbox__icon
,
.
cdx-checkbox__input
:
enabled
:
indeterminate
:
focus
:
not
(
:
active
)
:
not
(
:
hover
)+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-input-binary--checked
,
#36c
);
border-color
:
var
(
--border-color-progressive
,
#36c
)}.
cdx-checkbox__input
:
enabled
:
checked
:
focus
:
not
(
:
active
)+
.
cdx-checkbox__icon
,
.
cdx-checkbox__input
:
enabled
:
indeterminate
:
focus
:
not
(
:
active
)+
.
cdx-checkbox__icon
{
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
),
inset
0
0
0
2
px
var
(
--box-shadow-color-inverted
,
#fff
)}.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
+
.
cdx-checkbox__icon
{
border-color
:
var
(
--border-color-error
,
#9f3526
)}.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
hover
+
.
cdx-checkbox__icon
{
border-color
:
var
(
--border-color-error--hover
,
#fc493b
)}.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
active
+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-error--active
,
#9f3526
);
border-color
:
var
(
--border-color-transparent
,
transparent
)}.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
focus
+
.
cdx-checkbox__icon
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
)}.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
checked
+
.
cdx-checkbox__icon
,
.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
indeterminate
+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-error
,
#d73333
);
border-color
:
var
(
--border-color-transparent
,
transparent
)}.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
checked
:
hover
+
.
cdx-checkbox__icon
,
.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
indeterminate
:
hover
+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-error--hover
,
#fc493b
);
border-color
:
var
(
--border-color-error--hover
,
#fc493b
)}.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
checked
:
active
+
.
cdx-checkbox__icon
,
.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
indeterminate
:
active
+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-error--active
,
#9f3526
);
border-color
:
var
(
--border-color-transparent
,
transparent
)}.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
checked
:
focus
:
not
(
:
active
)+
.
cdx-checkbox__icon
,
.
cdx-checkbox--status-error
.
cdx-checkbox__input
:
enabled
:
indeterminate
:
focus
:
not
(
:
active
)+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-error
,
#d73333
);
border-color
:
var
(
--border-color-progressive--focus
,
#36c
)}.
cdx-checkbox__input
:
disabled
+
.
cdx-checkbox__icon
{
background-color
:
var
(
--background-color-disabled
,
#c8ccd1
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
)}.
cdx-checkbox__input
:
disabled
~
.
cdx-checkbox__label
,
.
cdx-checkbox__input
:
disabled
~
.
cdx-checkbox__label
.
cdx-label
{
color
:
var
(
--color-disabled
,
#72777d
)}.
cdx-input-chip
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
color
:
var
(
--color-base
,
#202122
);
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
4
px
;
max-width
:
32
rem
;
border
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
);
border-radius
:
9999
px
;
padding
:
0
8
px
0
0
;
font-size
:
.875
rem
;
line-height
:
1.5714285
}.
cdx-input-chip
:
not
(
.
cdx-input-chip--disabled
)
{
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
}.
cdx-input-chip
:
not
(
.
cdx-input-chip--disabled
)
:
hover
{
background-color
:
var
(
--background-color-base
,
#fff
);
cursor
:
pointer
}.
cdx-input-chip
:
not
(
.
cdx-input-chip--disabled
)
:
focus
{
outline
:
1
px
solid
transparent
}.
cdx-input-chip
:
not
(
.
cdx-input-chip--disabled
)
:
active
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
);
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-input-chip
:
not
(
.
cdx-input-chip--disabled
)
:
focus
:
not
(
:
active
)
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
)}.
cdx-input-chip--disabled
{
background-color
:
var
(
--background-color-disabled
,
#c8ccd1
);
color
:
var
(
--color-inverted
,
#fff
);
border-color
:
var
(
--border-color-transparent
,
transparent
)}.
cdx-input-chip--disabled
.
cdx-icon
{
color
:
var
(
--color-inverted
,
#fff
)}.
cdx-input-chip__text
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
}.
cdx-input-chip__button
.
cdx-button
{
min-width
:
20
px
;
min-height
:
20
px
;
margin-left
:
1
px
;
border-radius
:
9999
px
;
padding-left
:
2
px
;
padding-right
:
2
px
;
font-size
:
.75
rem
}.
cdx-chip-input
{
border-radius
:
2
px
;
overflow
:
hidden
}.
cdx-chip-input__chips
,
.
cdx-chip-input__separate-input
{
box-sizing
:
border-box
;
min-width
:
256
px
;
min-height
:
32
px
;
border-width
:
1
px
;
border-style
:
solid
;
padding
:
3
px
8
px
;
line-height
:
1.4285714
}.
cdx-chip-input__chips
{
display
:
flex
;
flex
:
1
auto
;
flex-flow
:
wrap
;
gap
:
8
px
}.
cdx-chip-input__input
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
color
:
var
(
--color-base
,
#202122
);
flex-grow
:
inherit
;
border
:
0
;
font-family
:
inherit
;
font-size
:
inherit
;
line-height
:
1
}.
cdx-chip-input__input
:
focus
{
outline
:
1
px
solid
transparent
}.
cdx-chip-input__input
::
placeholder
{
color
:
var
(
--color-placeholder
,
#72777d
);
opacity
:
1
}.
cdx-chip-input--has-separate-input
.
cdx-chip-input__chips
{
margin-bottom
:
-1
px
}.
cdx-chip-input--has-separate-input
.
cdx-chip-input__input
{
width
:
100
%
}.
cdx-chip-input__aria-status
{
display
:
block
;
clip
:
rect
(
1
px
,
1
px
,
1
px
,
1
px
);
position
:
absolute
!important
;
width
:
1
px
;
height
:
1
px
;
margin
:
-1
px
;
border
:
0
;
padding
:
0
;
overflow
:
hidden
}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input__chips
,
.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input__separate-input
{
border-color
:
var
(
--border-color-base
,
#a2a9b1
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-transparent
,
transparent
);
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input__separate-input
{
background-color
:
var
(
--background-color-base
,
#fff
)}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
{
background-color
:
var
(
--background-color-base
,
#fff
)}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--has-separate-input
.
cdx-chip-input__chips
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
)}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
:
hover
,
.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--has-separate-input
.
cdx-chip-input__separate-input
:
hover
{
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--focused
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
,
.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--focused
.
cdx-chip-input--has-separate-input
.
cdx-chip-input__separate-input
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--status-error
:
not
(
.
cdx-chip-input--focused
)
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
,
.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--status-error
:
not
(
.
cdx-chip-input--focused
)
.
cdx-chip-input--has-separate-input
.
cdx-chip-input__separate-input
{
color
:
var
(
--color-error
,
#d73333
);
border-color
:
var
(
--border-color-error
,
#9f3526
)}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--status-error
:
not
(
.
cdx-chip-input--focused
)
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
:
hover
,
.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--status-error
:
not
(
.
cdx-chip-input--focused
)
.
cdx-chip-input--has-separate-input
.
cdx-chip-input__separate-input
:
hover
{
border-color
:
var
(
--border-color-error--hover
,
#fc493b
)}.
cdx-chip-input--disabled
.
cdx-chip-input__chips
,
.
cdx-chip-input--disabled
.
cdx-chip-input__separate-input
{
background-color
:
var
(
--background-color-disabled-subtle
,
#eaecf0
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
)}.
cdx-chip-input--disabled
.
cdx-chip-input__chips
.
cdx-chip-input__input
,
.
cdx-chip-input--disabled
.
cdx-chip-input__separate-input
.
cdx-chip-input__input
{
color
:
var
(
--color-disabled
,
#72777d
);
-webkit-
text-fill-color
:
var
(
--color-disabled
,
#72777d
)}.
cdx-search-result-title
{
display
:
inline-block
;
max-width
:
100
%
;
font-weight
:
700
}.
cdx-search-result-title__match
{
font-weight
:
400
}.
cdx-menu-item
{
list-style
:
none
;
position
:
relative
;
padding
:
8
px
12
px
;
line-height
:
1.6
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}.
cdx-menu-item__content
{
display
:
flex
;
align-items
:
center
;
line-height
:
1.4285714
;
word-wrap
:
break-word
;
-webkit-
hyphens
:
auto
;
-ms-
hyphens
:
auto
;
hyphens
:
auto
}.
cdx-menu-item__content
,
.
cdx-menu-item__content
:
hover
{
text-decoration
:
none
}.
cdx-menu-item--has-description
.
cdx-menu-item__content
{
align-items
:
flex-start
}.
cdx-menu-item__text
{
max-width
:
100
%
}.
cdx-menu-item__text__description
{
display
:
block
}.
cdx-menu-item__thumbnail
.
cdx-thumbnail
,
.
cdx-menu-item__icon
{
margin-left
:
8
px
}.
cdx-menu-item__selected-icon
{
height
:
1.4285714
em
;
margin-right
:
auto
}.
cdx-menu-item__icon
.
cdx-icon
,
.
cdx-menu-item__selected-icon
.
cdx-icon
{
color
:
inherit
}.
cdx-menu-item--bold-label
.
cdx-menu-item__text__label
{
font-weight
:
700
}.
cdx-menu-item--hide-description-overflow
.
cdx-menu-item__text
{
overflow
:
hidden
}.
cdx-menu-item--hide-description-overflow
.
cdx-menu-item__text__description
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
}.
cdx-menu-item--enabled
,
.
cdx-menu-item--enabled
.
cdx-menu-item__content
{
color
:
var
(
--color-base
,
#202122
)}.
cdx-menu-item--enabled
.
cdx-menu-item__text__supporting-text
,
.
cdx-menu-item--enabled
.
cdx-menu-item__text__description
{
color
:
var
(
--color-subtle
,
#54595d
)}.
cdx-menu-item--enabled
.
cdx-menu-item--highlighted
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
color
:
var
(
--color-base--hover
,
#404244
);
cursor
:
pointer
}.
cdx-menu-item--enabled
.
cdx-menu-item--highlighted
.
cdx-menu-item__content
,
.
cdx-menu-item--enabled
.
cdx-menu-item--highlighted
.
cdx-menu-item__text__description
{
color
:
var
(
--color-base--hover
,
#404244
)}.
cdx-menu-item--enabled
.
cdx-menu-item--active
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
);
color
:
var
(
--color-emphasized
,
#101418
)}.
cdx-menu-item--enabled
.
cdx-menu-item--active
.
cdx-menu-item__content
,
.
cdx-menu-item--enabled
.
cdx-menu-item--active
.
cdx-menu-item__text__description
{
color
:
var
(
--color-emphasized
,
#101418
)}.
cdx-menu-item--enabled
.
cdx-menu-item--selected
{
background-color
:
var
(
--background-color-progressive-subtle
,
#f1f4fd
)}.
cdx-menu-item--enabled
.
cdx-menu-item--selected
.
cdx-menu-item__content
{
color
:
var
(
--color-progressive
,
#36c
)}.
cdx-menu-item--enabled
.
cdx-menu-item--selected
.
cdx-menu-item--highlighted
.
cdx-menu-item__content
{
color
:
var
(
--color-progressive--hover
,
#4b77d6
)}.
cdx-menu-item--enabled
.
cdx-menu-item--selected
.
cdx-menu-item--highlighted
.
cdx-menu-item__text__description
{
color
:
var
(
--color-subtle
,
#54595d
)}.
cdx-menu-item--enabled
.
cdx-menu-item--selected
.
cdx-menu-item--active
.
cdx-menu-item__content
{
color
:
var
(
--color-progressive--active
,
#233566
)}.
cdx-menu-item--enabled
.
cdx-menu-item--selected
.
cdx-menu-item--active
.
cdx-menu-item__text__description
{
color
:
var
(
--color-subtle
,
#54595d
)}.
cdx-menu-item--disabled
{
color
:
var
(
--color-disabled
,
#72777d
);
cursor
:
default
}.
cdx-menu-item--disabled
.
cdx-menu-item__text__description
{
color
:
var
(
--color-disabled
,
#72777d
)}.
cdx-menu-item--destructive
.
cdx-menu-item__content
{
color
:
var
(
--color-destructive
,
#d73333
)}.
cdx-menu-item--destructive
.
cdx-menu-item--highlighted
.
cdx-menu-item__content
{
color
:
var
(
--color-destructive--hover
,
#fc493b
)}.
cdx-menu-item--destructive
.
cdx-menu-item--active
.
cdx-menu-item__content
{
color
:
var
(
--color-destructive--active
,
#9f3526
)}.
cdx-menu-item--destructive
.
cdx-menu-item--selected
.
cdx-menu-item--highlighted
.
cdx-menu-item__content
,
.
cdx-menu-item--destructive
.
cdx-menu-item--selected
.
cdx-menu-item--highlighted
.
cdx-menu-item__text__description
{
color
:
var
(
--color-destructive--hover
,
#fc493b
)}.
cdx-progress-bar
{
box-sizing
:
border-box
;
overflow-x
:
hidden
}.
cdx-progress-bar__bar
{
width
:
33.33
%
;
height
:
100
%
}.
cdx-progress-bar
:
not
(
.
cdx-progress-bar--inline
)
{
position
:
relative
;
z-index
:
1
;
height
:
1
rem
;
max-width
:
none
;
border
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
);
border-radius
:
9999
px
;
box-shadow
:
0
2
px
2
px
rgba
(
0
,
0
,
0
,
.2
)}.
cdx-progress-bar--inline
{
width
:
100
%
;
height
:
.25
rem
}.
cdx-progress-bar
:
not
(
.
cdx-progress-bar--disabled
)
.
cdx-progress-bar__bar
{
background-color
:
var
(
--background-color-progressive
,
#36c
);
animation-name
:
cdx-animation-progress-bar__bar
;
animation-duration
:
1.6
s
;
animation-timing-function
:
linear
;
animation-iteration-count
:
infinite
}.
cdx-progress-bar
:
not
(
.
cdx-progress-bar--disabled
)
.
cdx-progress-bar--block
{
background-color
:
var
(
--background-color-base
,
#fff
)}.
cdx-progress-bar--disabled
.
cdx-progress-bar__bar
{
background-color
:
var
(
--background-color-disabled
,
#c8ccd1
)}.
cdx-progress-bar--disabled
:
not
(
.
cdx-progress-bar--inline
)
{
background-color
:
var
(
--background-color-disabled-subtle
,
#eaecf0
)}@
keyframes
cdx-animation-progress-bar__bar
{
0
%
{
transform
:
translate
(
100
%
)}
to
{
transform
:
translate
(
-300
%
)}}.
cdx-menu
{
background-color
:
var
(
--background-color-base
,
#fff
);
display
:
flex
;
flex-direction
:
column
;
position
:
absolute
;
right
:
0
;
z-index
:
50
;
box-sizing
:
border-box
;
width
:
100
%
;
border
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
);
border-radius
:
2
px
;
box-shadow
:
0
2
px
2
px
rgba
(
0
,
0
,
0
,
.2
)}.
cdx-menu__progress-bar
.
cdx-progress-bar
{
position
:
absolute
;
top
:
0
}.
cdx-menu__listbox
{
margin
:
0
;
padding
:
0
;
overflow-y
:
auto
}.
cdx-menu--has-footer
.
cdx-menu-item
:
last-of-type
{
position
:
absolute
;
bottom
:
0
;
box-sizing
:
border-box
;
width
:
100
%
}.
cdx-menu--has-footer
.
cdx-menu-item
:
last-of-type
:
not
(
:
first-of-type
)
{
border-top
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
)}.
cdx-text-input
{
position
:
relative
;
box-sizing
:
border-box
;
min-width
:
256
px
;
border-radius
:
2
px
;
overflow
:
hidden
}.
cdx-text-input
.
cdx-text-input__start-icon
{
position
:
absolute
;
top
:
50
%
;
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
transition-property
:
color
;
transition-duration
:
.1
s
;
right
:
9
px
;
transform
:
translateY
(
-50
%
)}.
cdx-text-input__icon
.
cdx-text-input__end-icon
{
min-width
:
16
px
;
min-height
:
16
px
;
width
:
1
rem
;
height
:
1
rem
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-text-input__icon
.
cdx-text-input__end-icon
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
1
rem
,
16
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-text-input__icon
.
cdx-text-input__end-icon
{
-webkit-
mask-size
:
max
(
1
rem
,
16
px
);
mask-size
:
max
(
1
rem
,
16
px
);
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-position
:
center
;
mask-position
:
center
}}.
cdx-text-input__clear-icon
.
cdx-icon
,
.
cdx-text-input
.
cdx-text-input__end-icon
{
position
:
absolute
;
top
:
50
%
;
min-width
:
16
px
;
min-height
:
16
px
;
width
:
1
rem
;
height
:
1
rem
;
transition-property
:
color
;
transition-duration
:
.1
s
;
left
:
9
px
;
transform
:
translateY
(
-50
%
)}.
cdx-text-input__clear-icon
.
cdx-icon
:
hover
{
cursor
:
pointer
}.
cdx-text-input__end-icon
.
cdx-icon
+
.
cdx-text-input__clear-icon
.
cdx-icon
{
left
:
calc
(
17
px
+
1
rem
)}.
cdx-text-input__input
{
display
:
block
;
box-sizing
:
border-box
;
min-height
:
32
px
;
width
:
100
%
;
margin
:
0
;
border-width
:
1
px
;
border-style
:
solid
;
border-radius
:
0
;
padding
:
4
px
8
px
;
font-family
:
inherit
;
font-size
:
inherit
;
line-height
:
1.375
}.
cdx-text-input__input
:
enabled
{
background-color
:
var
(
--background-color-base
,
#fff
);
color
:
var
(
--color-base
,
#202122
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-transparent
,
transparent
);
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
}.
cdx-text-input__input
:
enabled
~
.
cdx-text-input__icon-vue
{
color
:
var
(
--color-placeholder
,
#72777d
)}.
cdx-text-input__input
:
enabled
~
.
cdx-text-input__icon
{
opacity
:
var
(
--opacity-icon-placeholder
,
.51
)}.
cdx-text-input__input
:
enabled
:
hover
{
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-text-input__input
:
enabled
:
focus
~
.
cdx-text-input__icon-vue
,
.
cdx-text-input__input
:
enabled
.
cdx-text-input__input--has-value
~
.
cdx-text-input__icon-vue
{
color
:
var
(
--color-base
,
#202122
)}.
cdx-text-input__input
:
enabled
:
focus
~
.
cdx-text-input__icon
,
.
cdx-text-input__input
:
enabled
.
cdx-text-input__input--has-value
~
.
cdx-text-input__icon
{
opacity
:
1
}.
cdx-text-input__input
:
enabled
:
focus
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-text-input__input
:
enabled
:
read-only
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
)}.
cdx-text-input__input
:
disabled
{
background-color
:
var
(
--background-color-disabled-subtle
,
#eaecf0
);
color
:
var
(
--color-disabled
,
#72777d
);
-webkit-
text-fill-color
:
var
(
--color-disabled
,
#72777d
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
)}.
cdx-text-input__input
:
disabled
~
.
cdx-text-input__icon-vue
{
color
:
var
(
--color-disabled
,
#72777d
);
pointer-events
:
none
}.
cdx-text-input__input
:
disabled
~
.
cdx-text-input__icon
{
opacity
:
var
(
--opacity-icon-base--disabled
,
.51
)}.
cdx-text-input__input
::
placeholder
{
color
:
var
(
--color-placeholder
,
#72777d
);
opacity
:
1
}.
cdx-text-input__input
::
-ms-clear
{
display
:
none
}.
cdx-text-input__input
[
type
=
search
]
{
-webkit-
appearance
:
none
;
-moz-
appearance
:
textfield
}.
cdx-text-input__input
[
type
=
search
]
::
-webkit-search-decoration
,
.
cdx-text-input__input
[
type
=
search
]
::
-webkit-search-cancel-button
{
display
:
none
}.
cdx-text-input--has-start-icon
.
cdx-text-input__input
{
padding-right
:
calc
(
16
px
+
1.25
rem
)}.
cdx-text-input--has-end-icon
.
cdx-text-input__input
,
.
cdx-text-input--clearable
.
cdx-text-input__input
{
padding-left
:
calc
(
16
px
+
1
rem
)}.
cdx-text-input--has-end-icon
.
cdx-text-input--clearable
.
cdx-text-input__input
{
padding-left
:
calc
(
24
px
+
2
rem
)}.
cdx-text-input--status-error
.
cdx-text-input__input
:
enabled
{
border-color
:
var
(
--border-color-error
,
#9f3526
)}.
cdx-text-input--status-error
.
cdx-text-input__input
:
enabled
:
hover
{
border-color
:
var
(
--border-color-error--hover
,
#fc493b
)}.
cdx-text-input--status-error
.
cdx-text-input__input
:
enabled
:
focus
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
)}.
cdx-combobox
{
display
:
inline-block
;
position
:
relative
}.
cdx-combobox__input-wrapper
{
display
:
flex
}.
cdx-combobox__input
.
cdx-text-input
{
flex
:
1
1
auto
;
min-width
:
224
px
;
border-top-left-radius
:
0
;
border-bottom-left-radius
:
0
}.
cdx-combobox__input
.
cdx-text-input
.
cdx-text-input__input
{
border-left-width
:
0
}.
cdx-combobox__expand-button
.
cdx-button
{
position
:
relative
;
border-top-right-radius
:
0
;
border-bottom-right-radius
:
0
}.
cdx-combobox__expand-icon
.
cdx-icon
{
position
:
absolute
;
top
:
50
%
;
min-width
:
12
px
;
min-height
:
12
px
;
width
:
.75
rem
;
height
:
.75
rem
;
transition-property
:
color
;
transition-duration
:
.1
s
;
right
:
50
%
;
transform
:
translate
(
50
%
,
-50
%
)}.
cdx-combobox--expanded
.
cdx-combobox__expand-button
.
cdx-button
{
border-bottom-left-radius
:
0
}.
cdx-dialog
.
cdx-combobox
{
position
:
static
}.
cdx-dialog-backdrop
{
background-color
:
var
(
--background-color-backdrop-light
,
rgba
(
255
,
255
,
255
,
.65
));
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
position
:
fixed
;
top
:
0
;
right
:
0
;
z-index
:
400
;
min-height
:
100
%
;
width
:
100
vw
;
height
:
100
vh
;
height
:
-webkit-
fill
-
available
}.
cdx-dialog
{
background-color
:
var
(
--background-color-base
,
#fff
);
display
:
flex
;
flex-direction
:
column
;
box-sizing
:
border-box
;
width
:
calc
(
100
%
-
2
rem
);
max-width
:
32
rem
;
max-height
:
calc
(
100
vh
-
2.5
rem
);
border
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
);
border-radius
:
2
px
;
box-shadow
:
0
2
px
2
px
rgba
(
0
,
0
,
0
,
.2
)}.
cdx-dialog__header
{
padding
:
16
px
24
px
}.
cdx-dialog__header--default
{
display
:
flex
;
align-items
:
baseline
;
justify-content
:
flex-end
;
box-sizing
:
border-box
;
width
:
100
%
}.
cdx-dialog__header__title-group
{
display
:
flex
;
flex-grow
:
1
;
flex-direction
:
column
;
gap
:
6
px
}.
cdx-dialog__header
.
cdx-dialog__header__title
{
margin
:
0
;
border
:
0
;
padding
:
0
;
font-family
:
inherit
;
font-size
:
1.125
rem
;
font-weight
:
700
;
line-height
:
1.25
}.
cdx-dialog__header
.
cdx-dialog__header__subtitle
{
color
:
var
(
--color-subtle
,
#54595d
);
margin
:
0
;
padding
:
0
;
font-size
:
1
rem
;
line-height
:
1.375
}.
cdx-dialog__header__close-button
.
cdx-button
{
margin-left
:
-8
px
}.
cdx-dialog--dividers
.
cdx-dialog__header
{
border-bottom
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
)}.
cdx-dialog__body
{
flex-grow
:
1
;
padding
:
16
px
24
px
;
overflow-y
:
auto
}.
cdx-dialog__body--no-header
{
padding-top
:
24
px
}.
cdx-dialog__body--no-footer
{
padding-bottom
:
24
px
}.
cdx-dialog__body
>*
:
first-child
{
margin-top
:
0
;
padding-top
:
0
}.
cdx-dialog__body
>*
:
last-child
{
margin-bottom
:
0
;
padding-bottom
:
0
}.
cdx-dialog__footer
{
padding
:
16
px
24
px
24
px
}.
cdx-dialog__footer--default
{
display
:
flex
;
align-items
:
baseline
;
flex-wrap
:
wrap
;
justify-content
:
space-between
;
gap
:
12
px
}.
cdx-dialog__footer
.
cdx-dialog__footer__text
{
color
:
var
(
--color-subtle
,
#54595d
);
flex
:
1
0
auto
;
width
:
100
%
;
margin
:
0
;
font-size
:
.875
rem
;
line-height
:
1.5714285
}.
cdx-dialog__footer__actions
{
display
:
flex
;
flex-grow
:
1
;
gap
:
12
px
}.
cdx-dialog--dividers
.
cdx-dialog__footer
{
border-top
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
)}.
cdx-dialog--horizontal-actions
.
cdx-dialog__footer__actions
{
flex-direction
:
row-reverse
}.
cdx-dialog--vertical-actions
.
cdx-dialog__footer__actions
{
flex-direction
:
column
;
width
:
100
%
}.
cdx-dialog--vertical-actions
.
cdx-dialog__footer
.
cdx-dialog__footer__primary-action
.
cdx-button
,
.
cdx-dialog--vertical-actions
.
cdx-dialog__footer
.
cdx-dialog__footer__default-action
.
cdx-button
{
max-width
:
none
}.
cdx-dialog-focus-trap
{
position
:
absolute
}.
cdx-dialog-focus-trap
:
focus
{
outline
:
0
}.
cdx-dialog-fade-enter-active
,
.
cdx-dialog-fade-leave-active
{
transition-property
:
opacity
;
transition-duration
:
.25
s
;
transition-timing-function
:
ease
}.
cdx-dialog-fade-enter-from
,
.
cdx-dialog-fade-leave-to
{
opacity
:
0
}
body
.
cdx-dialog-open
{
overflow
:
hidden
}.
cdx-message
{
background-color
:
var
(
--background-color-notice-subtle
,
#eaecf0
);
color
:
var
(
--color-notice
,
#202122
);
display
:
flex
;
align-items
:
flex-start
;
position
:
relative
;
border
:
1
px
solid
var
(
--border-color-notice
,
#54595d
);
padding
:
16
px
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-message
{
padding-left
:
24
px
;
padding-right
:
24
px
}}.
cdx-message
.
cdx-message__icon
{
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-message
.
cdx-message__icon
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
1.25
rem
,
20
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-message
.
cdx-message__icon
{
-webkit-
mask-size
:
max
(
1.25
rem
,
20
px
);
mask-size
:
max
(
1.25
rem
,
20
px
);
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-position
:
center
;
mask-position
:
center
}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-message
.
cdx-message__icon
{
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0M9 5h2v2H9zm0 4h2v6H9z"/></svg>'
);
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}.
cdx-button
:
not
(
.
cdx-button--weight-quiet
)
:
disabled
.
cdx-message
.
cdx-message__icon
,
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-message
.
cdx-message__icon
,
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-message
.
cdx-message__icon
{
filter
:
invert
(
var
(
--filter-invert-primary-button-icon
,
1
))}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-message
.
cdx-message__icon
{
-webkit-
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0M9 5h2v2H9zm0 4h2v6H9z"/></svg>'
);
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0M9 5h2v2H9zm0 4h2v6H9z"/></svg>'
);
background-color
:
var
(
--color-base
,
#202122
)}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-message
.
cdx-message__icon
:
lang
(
ar
)
{
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7"/></svg>'
);
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}.
cdx-button
:
not
(
.
cdx-button--weight-quiet
)
:
disabled
.
cdx-message
.
cdx-message__icon
:
lang
(
ar
),
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-message
.
cdx-message__icon
:
lang
(
ar
),
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-message
.
cdx-message__icon
:
lang
(
ar
)
{
filter
:
invert
(
var
(
--filter-invert-primary-button-icon
,
1
))}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-message
.
cdx-message__icon
:
lang
(
ar
)
{
-webkit-
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7"/></svg>'
);
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7"/></svg>'
);
background-color
:
var
(
--color-base
,
#202122
)}}.
cdx-message--warning
{
background-color
:
var
(
--background-color-warning-subtle
,
#fdf2d5
);
border-color
:
var
(
--border-color-warning
,
#987027
)}.
cdx-message--warning
.
cdx-message__icon
{
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-message--warning
.
cdx-message__icon
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
1.25
rem
,
20
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-message--warning
.
cdx-message__icon
{
-webkit-
mask-size
:
max
(
1.25
rem
,
20
px
);
mask-size
:
max
(
1.25
rem
,
20
px
);
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-position
:
center
;
mask-position
:
center
}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-message--warning
.
cdx-message__icon
{
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>'
);
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}.
cdx-button
:
not
(
.
cdx-button--weight-quiet
)
:
disabled
.
cdx-message--warning
.
cdx-message__icon
,
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-message--warning
.
cdx-message__icon
,
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-message--warning
.
cdx-message__icon
{
filter
:
invert
(
var
(
--filter-invert-primary-button-icon
,
1
))}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-message--warning
.
cdx-message__icon
{
-webkit-
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>'
);
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>'
);
background-color
:
var
(
--color-warning
,
#eeb533
)}}.
cdx-message--warning
.
cdx-message__icon--vue
{
color
:
var
(
--color-warning
,
#eeb533
)}.
cdx-message--error
{
background-color
:
var
(
--background-color-error-subtle
,
#ffe9e5
);
border-color
:
var
(
--border-color-error
,
#9f3526
)}.
cdx-message--error
.
cdx-message__icon
{
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-message--error
.
cdx-message__icon
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
1.25
rem
,
20
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-message--error
.
cdx-message__icon
{
-webkit-
mask-size
:
max
(
1.25
rem
,
20
px
);
mask-size
:
max
(
1.25
rem
,
20
px
);
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-position
:
center
;
mask-position
:
center
}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-message--error
.
cdx-message__icon
{
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M13.728 1H6.272L1 6.272v7.456L6.272 19h7.456L19 13.728V6.272zM11 15H9v-2h2zm0-4H9V5h2z"/></svg>'
);
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}.
cdx-button
:
not
(
.
cdx-button--weight-quiet
)
:
disabled
.
cdx-message--error
.
cdx-message__icon
,
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-message--error
.
cdx-message__icon
,
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-message--error
.
cdx-message__icon
{
filter
:
invert
(
var
(
--filter-invert-primary-button-icon
,
1
))}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-message--error
.
cdx-message__icon
{
-webkit-
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M13.728 1H6.272L1 6.272v7.456L6.272 19h7.456L19 13.728V6.272zM11 15H9v-2h2zm0-4H9V5h2z"/></svg>'
);
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M13.728 1H6.272L1 6.272v7.456L6.272 19h7.456L19 13.728V6.272zM11 15H9v-2h2zm0-4H9V5h2z"/></svg>'
);
background-color
:
var
(
--color-error
,
#d73333
)}}.
cdx-message--error
.
cdx-message__icon--vue
{
color
:
var
(
--color-error
,
#d73333
)}.
cdx-message--success
{
background-color
:
var
(
--background-color-success-subtle
,
#dff2eb
);
border-color
:
var
(
--border-color-success
,
#196551
)}.
cdx-message--success
.
cdx-message__icon
{
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-message--success
.
cdx-message__icon
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
1.25
rem
,
20
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-message--success
.
cdx-message__icon
{
-webkit-
mask-size
:
max
(
1.25
rem
,
20
px
);
mask-size
:
max
(
1.25
rem
,
20
px
);
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-position
:
center
;
mask-position
:
center
}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-message--success
.
cdx-message__icon
{
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>'
);
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}.
cdx-button
:
not
(
.
cdx-button--weight-quiet
)
:
disabled
.
cdx-message--success
.
cdx-message__icon
,
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-message--success
.
cdx-message__icon
,
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-message--success
.
cdx-message__icon
{
filter
:
invert
(
var
(
--filter-invert-primary-button-icon
,
1
))}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-message--success
.
cdx-message__icon
{
-webkit-
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>'
);
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>'
);
background-color
:
var
(
--color-success
,
#177860
)}}.
cdx-message--success
.
cdx-message__icon--vue
{
color
:
var
(
--color-success
,
#177860
)}.
cdx-message--user-dismissable
{
padding-left
:
48
px
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-message--user-dismissable
{
padding-left
:
56
px
}}.
cdx-message--inline
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
border
:
0
;
padding
:
0
;
font-weight
:
700
}.
cdx-message--inline
.
cdx-message--error
{
color
:
var
(
--color-error
,
#d73333
)}.
cdx-message--inline
.
cdx-message--success
{
color
:
var
(
--color-success
,
#177860
)}.
cdx-message
.
cdx-message__icon
,
.
cdx-message
.
cdx-message__icon--vue
{
height
:
1.6
em
}.
cdx-message__content
{
word-wrap
:
break-word
;
-webkit-
hyphens
:
auto
;
-ms-
hyphens
:
auto
;
hyphens
:
auto
;
align-self
:
center
;
flex-grow
:
1
;
width
:
0
;
margin-right
:
8
px
}.
cdx-message__content
,
.
cdx-message__content
>*
{
line-height
:
1.6
}.
cdx-message__content
>*
:
first-child
{
margin-top
:
0
;
padding-top
:
0
}.
cdx-message__content
>*
:
last-child
{
margin-bottom
:
0
;
padding-bottom
:
0
}.
cdx-message__dismiss-button
.
cdx-button
{
position
:
absolute
;
top
:
12
px
;
left
:
16
px
;
padding
:
5
px
;
line-height
:
0
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-message__dismiss-button
.
cdx-button
{
left
:
8
px
}}.
cdx-message
+
.
cdx-message
{
margin-top
:
8
px
}.
cdx-message-enter-active
,
.
cdx-message-leave-active-system
{
transition-property
:
opacity
;
transition-duration
:
.25
s
;
transition-timing-function
:
ease
}.
cdx-message-leave-active-user
{
transition-property
:
opacity
;
transition-duration
:
.25
s
;
transition-timing-function
:
ease-out
}.
cdx-message-enter-from
,
.
cdx-message-leave-to
{
opacity
:
0
}.
cdx-field
{
margin
:
16
px
0
0
;
border
:
0
;
padding
:
0
}.
cdx-field
:
first-child
{
margin-top
:
0
}.
cdx-field__help-text
{
line-height
:
1.375
}.
cdx-field__help-text
,
.
cdx-field__validation-message
{
margin-top
:
8
px
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-field__help-text
,
.
cdx-field__validation-message
{
margin-top
:
4
px
}}.
cdx-field
:
not
(
.
cdx-field--disabled
)
.
cdx-field__help-text
{
color
:
var
(
--color-subtle
,
#54595d
)}.
cdx-field--disabled
.
cdx-field__help-text
{
color
:
var
(
--color-disabled
,
#72777d
)}.
cdx-info-chip
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
4
px
;
max-width
:
32
rem
;
border
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
);
border-radius
:
9999
px
;
padding
:
0
8
px
;
line-height
:
1.5714285
}.
cdx-info-chip--text
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
color
:
var
(
--color-subtle
,
#54595d
);
font-size
:
.875
rem
}.
cdx-info-chip__icon--notice
.
cdx-icon
{
color
:
var
(
--color-notice
,
#202122
)}.
cdx-info-chip__icon--error
.
cdx-icon
{
color
:
var
(
--color-error
,
#d73333
)}.
cdx-info-chip__icon--warning
.
cdx-icon
{
color
:
var
(
--color-warning
,
#eeb533
)}.
cdx-info-chip__icon--success
.
cdx-icon
{
color
:
var
(
--color-success
,
#177860
)}.
cdx-info-chip
.
cdx-icon
{
min-width
:
16
px
;
min-height
:
16
px
;
width
:
1
rem
;
height
:
1
rem
}.
cdx-lookup
{
position
:
relative
;
box-sizing
:
border-box
;
vertical-align
:
middle
}.
cdx-lookup--pending
.
cdx-text-input
.
cdx-text-input__input
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
);
background-image
:
linear-gradient
(
-135deg
,
var
(
--background-color-base
,
#fff
)
25
%
,
var
(
--background-color-transparent
,
transparent
)
25
%
,
var
(
--background-color-transparent
,
transparent
)
50
%
,
var
(
--background-color-base
,
#fff
)
50
%
,
var
(
--background-color-base
,
#fff
)
75
%
,
var
(
--background-color-transparent
,
transparent
)
75
%
,
var
(
--background-color-transparent
,
transparent
));
background-size
:
1.25
rem
1.25
rem
;
animation-name
:
cdx-animation-pending-stripes
;
animation-duration
:
.65
s
;
animation-timing-function
:
linear
;
animation-iteration-count
:
infinite
}.
cdx-dialog
.
cdx-lookup
{
position
:
static
}.
cdx-toggle-button
{
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
4
px
;
box-sizing
:
border-box
;
min-height
:
32
px
;
max-width
:
28
rem
;
margin
:
0
;
border-width
:
1
px
;
border-style
:
solid
;
border-radius
:
2
px
;
padding-left
:
11
px
;
padding-right
:
11
px
;
font-family
:
inherit
;
font-size
:
inherit
;
font-weight
:
700
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
text-transform
:
none
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}.
cdx-toggle-button--size-large
{
min-height
:
44
px
;
padding-left
:
15
px
;
padding-right
:
15
px
}.
cdx-toggle-button--icon-only
{
min-width
:
32
px
;
padding-left
:
5
px
;
padding-right
:
5
px
}.
cdx-toggle-button--icon-only
.
cdx-toggle-button--size-large
{
min-width
:
44
px
;
padding-left
:
11
px
;
padding-right
:
11
px
}.
cdx-toggle-button
::
-moz-focus-inner
{
border
:
0
;
padding
:
0
}.
cdx-toggle-button
:
enabled
{
color
:
var
(
--color-base
,
#202122
)}.
cdx-toggle-button
:
enabled
:
hover
{
cursor
:
pointer
}.
cdx-toggle-button
:
enabled
:
focus
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-toggle-button
:
enabled
:
active
,
.
cdx-toggle-button
:
enabled
.
cdx-toggle-button--is-active
{
color
:
var
(
--color-emphasized
,
#101418
);
border-color
:
var
(
--border-color-interactive
,
#72777d
);
box-shadow
:
none
}.
cdx-toggle-button
.
cdx-icon
{
color
:
inherit
;
vertical-align
:
middle
}.
cdx-toggle-button--framed
:
enabled
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
)}.
cdx-toggle-button--framed
:
enabled
:
hover
{
background-color
:
var
(
--background-color-base
,
#fff
);
color
:
var
(
--color-base--hover
,
#404244
)}.
cdx-toggle-button--framed
:
enabled
:
active
,
.
cdx-toggle-button--framed
:
enabled
.
cdx-toggle-button--is-active
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
)}.
cdx-toggle-button--framed
:
disabled
{
background-color
:
var
(
--background-color-disabled
,
#c8ccd1
);
color
:
var
(
--color-inverted
,
#fff
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
)}.
cdx-toggle-button--framed
.
cdx-toggle-button--toggled-on
:
enabled
{
background-color
:
var
(
--background-color-progressive--active
,
#233566
);
color
:
var
(
--color-inverted-fixed
,
#fff
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-toggle-button--framed
.
cdx-toggle-button--toggled-on
:
enabled
:
hover
{
background-color
:
var
(
--background-color-progressive--hover
,
#4b77d6
);
color
:
var
(
--color-inverted-fixed
,
#fff
);
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-toggle-button--framed
.
cdx-toggle-button--toggled-on
:
enabled
:
focus
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
),
inset
0
0
0
2
px
var
(
--box-shadow-color-inverted
,
#fff
)}.
cdx-toggle-button--framed
.
cdx-toggle-button--toggled-on
:
enabled
:
active
,
.
cdx-toggle-button--framed
.
cdx-toggle-button--toggled-on
:
enabled
.
cdx-toggle-button--is-active
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
);
color
:
var
(
--color-emphasized
,
#101418
);
border-color
:
var
(
--border-color-interactive
,
#72777d
);
box-shadow
:
none
}.
cdx-toggle-button--quiet
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
border-color
:
var
(
--border-color-transparent
,
transparent
)}.
cdx-toggle-button--quiet
:
enabled
.
cdx-toggle-button--toggled-on
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
)}.
cdx-toggle-button--quiet
:
enabled
:
hover
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
)}.
cdx-toggle-button--quiet
:
enabled
:
focus
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
)}.
cdx-toggle-button--quiet
:
enabled
:
active
,
.
cdx-toggle-button--quiet
:
enabled
.
cdx-toggle-button--is-active
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
)}.
cdx-toggle-button--quiet
:
disabled
{
color
:
var
(
--color-disabled
,
#72777d
)}.
cdx-menu-button__menu-wrapper
{
position
:
relative
}.
cdx-menu-button
.
cdx-menu
{
min-width
:
8
rem
;
max-width
:
16
rem
}.
cdx-dialog
.
cdx-menu-button
{
position
:
static
}.
cdx-multiselect-lookup
{
position
:
relative
;
box-sizing
:
border-box
;
vertical-align
:
middle
}.
cdx-multiselect-lookup--pending
.
cdx-chip-input
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
,
.
cdx-multiselect-lookup--pending
.
cdx-chip-input
.
cdx-chip-input__separate-input
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
);
background-image
:
linear-gradient
(
-135deg
,
var
(
--background-color-base
,
#fff
)
25
%
,
var
(
--background-color-transparent
,
transparent
)
25
%
,
var
(
--background-color-transparent
,
transparent
)
50
%
,
var
(
--background-color-base
,
#fff
)
50
%
,
var
(
--background-color-base
,
#fff
)
75
%
,
var
(
--background-color-transparent
,
transparent
)
75
%
,
var
(
--background-color-transparent
,
transparent
));
background-size
:
1.25
rem
1.25
rem
;
animation-name
:
cdx-animation-pending-stripes
;
animation-duration
:
.65
s
;
animation-timing-function
:
linear
;
animation-iteration-count
:
infinite
}@
keyframes
cdx-animation-pending-stripes
{
0
%
{
background-position
:
right
-1.25
rem
top
0
}
to
{
background-position
:
100
%
0
}}.
cdx-dialog
.
cdx-multiselect-lookup
{
position
:
static
}.
cdx-radio
{
position
:
relative
;
min-width
:
20
px
;
min-height
:
20
px
}.
cdx-radio__wrapper
{
display
:
flex
}.
cdx-radio
:
not
(
.
cdx-radio--inline
)
{
display
:
flex
;
flex-direction
:
column
;
margin-bottom
:
12
px
}.
cdx-radio
:
not
(
.
cdx-radio--inline
)
:
last-child
{
margin-bottom
:
0
}.
cdx-radio--inline
{
display
:
inline-flex
;
margin-left
:
16
px
;
white-space
:
nowrap
}.
cdx-radio--inline
:
last-child
{
margin-left
:
0
}.
cdx-radio__label
,
.
cdx-radio__label
.
cdx-label
{
display
:
inline-flex
;
position
:
relative
;
z-index
:
0
;
padding-right
:
calc
(
1.25
rem
+
8
px
);
line-height
:
1.4285714
}.
cdx-radio__label
.
cdx-label
{
padding-bottom
:
0
}.
cdx-radio__label
.
cdx-label
.
cdx-label__label__text
{
font-weight
:
400
}.
cdx-radio--inline
.
cdx-radio__label
{
display
:
inline
}.
cdx-radio__icon
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
position
:
absolute
;
right
:
0
;
box-sizing
:
border-box
;
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
border-width
:
1
px
;
border-style
:
solid
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}.
cdx-radio__input
{
opacity
:
0
;
position
:
absolute
;
right
:
0
;
z-index
:
1
;
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
margin
:
0
;
font-size
:
inherit
;
cursor
:
inherit
}.
cdx-radio
:
hover
>
.
cdx-radio__input
:
enabled
,
.
cdx-radio
:
hover
>
.
cdx-radio__input
:
enabled
~
.
cdx-label
.
cdx-label__label
,
.
cdx-radio
:
hover
>
.
cdx-radio__input
:
enabled
~
.
cdx-radio__label
:
not
(
.
cdx-label
)
{
cursor
:
pointer
}.
cdx-radio__custom-input
:
not
(
.
cdx-radio__custom-input--inline
)
{
padding-top
:
6
px
;
padding-right
:
calc
(
1.25
rem
+
8
px
)}.
cdx-radio__icon
{
border-radius
:
50
%
}.
cdx-radio__icon
:
before
{
content
:
" "
;
position
:
absolute
;
top
:
-.25
rem
;
left
:
-.25
rem
;
bottom
:
-.25
rem
;
right
:
-.25
rem
;
border
:
1
px
solid
var
(
--border-color-transparent
,
transparent
);
border-radius
:
50
%
}.
cdx-radio__input
:
enabled
+
.
cdx-radio__icon
{
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-radio__input
:
enabled
:
hover
+
.
cdx-radio__icon
{
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-radio__input
:
enabled
:
active
+
.
cdx-radio__icon
{
background-color
:
var
(
--background-color-progressive--active
,
#233566
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-radio__input
:
enabled
:
focus
+
.
cdx-radio__icon
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
)}.
cdx-radio__input
:
enabled
:
checked
+
.
cdx-radio__icon
{
border-width
:
6
px
;
border-color
:
var
(
--border-color-progressive
,
#36c
)}.
cdx-radio__input
:
enabled
:
checked
:
hover
+
.
cdx-radio__icon
{
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-radio__input
:
enabled
:
checked
:
focus
+
.
cdx-radio__icon
:
before
{
border-color
:
var
(
--border-color-inverted
,
#fff
)}.
cdx-radio__input
:
enabled
:
checked
:
active
+
.
cdx-radio__icon
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-radio__input
:
enabled
:
checked
:
active
+
.
cdx-radio__icon
:
before
{
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-radio--status-error
.
cdx-radio__input
:
enabled
+
.
cdx-radio__icon
{
border-color
:
var
(
--border-color-destructive
,
#d73333
)}.
cdx-radio--status-error
.
cdx-radio__input
:
enabled
:
hover
+
.
cdx-radio__icon
{
border-color
:
var
(
--border-color-error--hover
,
#fc493b
)}.
cdx-radio--status-error
.
cdx-radio__input
:
enabled
:
focus
+
.
cdx-radio__icon
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
)}.
cdx-radio--status-error
.
cdx-radio__input
:
enabled
:
active
+
.
cdx-radio__icon
{
background-color
:
var
(
--background-color-error--active
,
#9f3526
);
border-color
:
var
(
--border-color-destructive--active
,
#9f3526
);
box-shadow
:
none
}.
cdx-radio--status-error
.
cdx-radio__input
:
enabled
:
checked
:
focus
:
not
(
.
cdx-radio--status-error
.
cdx-radio__input
:
enabled
:
checked
:
active
)+
.
cdx-radio__icon
{
border-width
:
1
px
}.
cdx-radio--status-error
.
cdx-radio__input
:
enabled
:
checked
:
focus
:
not
(
.
cdx-radio--status-error
.
cdx-radio__input
:
enabled
:
checked
:
active
)+
.
cdx-radio__icon
:
before
{
top
:
2
px
;
left
:
2
px
;
bottom
:
2
px
;
right
:
2
px
;
border-width
:
4
px
;
border-color
:
var
(
--border-color-destructive
,
#d73333
)}.
cdx-radio--status-error
.
cdx-radio__input
:
enabled
:
checked
:
active
+
.
cdx-radio__icon
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
border-color
:
var
(
--border-color-destructive--active
,
#9f3526
);
box-shadow
:
none
}.
cdx-radio--status-error
.
cdx-radio__input
:
enabled
:
checked
:
active
+
.
cdx-radio__icon
:
before
{
border-color
:
var
(
--border-color-transparent
,
transparent
)}.
cdx-radio__input
:
disabled
~
.
cdx-radio__label
,
.
cdx-radio__input
:
disabled
~
.
cdx-radio__label
.
cdx-label
{
color
:
var
(
--color-disabled
,
#72777d
)}.
cdx-radio__input
:
disabled
+
.
cdx-radio__icon
{
background-color
:
var
(
--background-color-disabled
,
#c8ccd1
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
)}.
cdx-radio__input
:
disabled
:
checked
+
.
cdx-radio__icon
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
border-width
:
6
px
;
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
)}.
cdx-search-input--has-end-button
{
background-color
:
var
(
--background-color-base
,
#fff
);
display
:
flex
;
border
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
);
border-radius
:
2
px
}.
cdx-search-input--has-end-button
.
cdx-search-input__input-wrapper
{
flex-grow
:
1
;
margin
:
-1
px
}.
cdx-search-input--has-end-button
.
cdx-search-input__input-wrapper
.
cdx-text-input
{
border-top-left-radius
:
0
;
border-bottom-left-radius
:
0
}.
cdx-search-input__end-button
.
cdx-button
{
flex-shrink
:
0
;
margin
:
-1
px
0
-1
px
-1
px
;
border-top-right-radius
:
0
;
border-bottom-right-radius
:
0
}.
cdx-search-input__end-button
.
cdx-button
:
hover
,
.
cdx-search-input__end-button
.
cdx-button
:
focus
{
z-index
:
1
}.
cdx-search-input__input-wrapper
{
position
:
relative
}.
cdx-search-input
.
cdx-text-input__icon
.
cdx-text-input__start-icon
{
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-search-input
.
cdx-text-input__icon
.
cdx-text-input__start-icon
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
1.25
rem
,
20
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-search-input
.
cdx-text-input__icon
.
cdx-text-input__start-icon
{
-webkit-
mask-size
:
max
(
1.25
rem
,
20
px
);
mask-size
:
max
(
1.25
rem
,
20
px
);
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-position
:
center
;
mask-position
:
center
}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-search-input
.
cdx-text-input__icon
.
cdx-text-input__start-icon
{
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M12.2 13.6a7 7 0 111.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1010 0A5 5 0 003 8"/></svg>'
);
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}.
cdx-button
:
not
(
.
cdx-button--weight-quiet
)
:
disabled
.
cdx-search-input
.
cdx-text-input__icon
.
cdx-text-input__start-icon
,
.
cdx-button--weight-primary
.
cdx-button--action-progressive
.
cdx-search-input
.
cdx-text-input__icon
.
cdx-text-input__start-icon
,
.
cdx-button--weight-primary
.
cdx-button--action-destructive
.
cdx-search-input
.
cdx-text-input__icon
.
cdx-text-input__start-icon
{
filter
:
invert
(
var
(
--filter-invert-primary-button-icon
,
1
))}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-search-input
.
cdx-text-input__icon
.
cdx-text-input__start-icon
{
-webkit-
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M12.2 13.6a7 7 0 111.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1010 0A5 5 0 003 8"/></svg>'
);
mask-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23000000"><path d="M12.2 13.6a7 7 0 111.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1010 0A5 5 0 003 8"/></svg>'
);
background-color
:
var
(
--color-base
,
#202122
)}}.
cdx-select
{
box-sizing
:
border-box
;
min-width
:
256
px
;
min-height
:
32
px
;
border-width
:
1
px
;
border-style
:
solid
;
border-radius
:
2
px
;
padding-top
:
4
px
;
padding-bottom
:
4
px
;
padding-right
:
12
px
;
padding-left
:
calc
(
16
px
+
1.25
rem
);
font-size
:
inherit
;
line-height
:
1.375
;
-webkit-
appearance
:
none
;
appearance
:
none
;
background-position
:
center
left
12
px
;
background-repeat
:
no-repeat
;
background-size
:
max
(
.75
rem
,
12
px
)}.
cdx-select
:
disabled
{
background-color
:
var
(
--background-color-disabled-subtle
,
#eaecf0
);
color
:
var
(
--color-disabled
,
#72777d
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
);
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%2372777d"><path d="m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z"/></svg>'
);
opacity
:
1
}.
cdx-select
:
enabled
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
color
:
var
(
--color-base
,
#202122
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
);
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
;
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23202122"><path d="m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z"/></svg>'
)}.
cdx-select
:
enabled
:
hover
{
background-color
:
var
(
--background-color-base
,
#fff
);
color
:
var
(
--color-base--hover
,
#404244
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
);
cursor
:
pointer
}.
cdx-select
:
enabled
:
focus
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-select
:
enabled
:
active
{
color
:
var
(
--color-emphasized
,
#101418
);
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-select-vue
{
display
:
inline-block
;
position
:
relative
}.
cdx-select-vue__handle
{
box-sizing
:
border-box
;
min-width
:
256
px
;
min-height
:
32
px
;
border-width
:
1
px
;
border-style
:
solid
;
border-radius
:
2
px
;
padding-top
:
4
px
;
padding-bottom
:
4
px
;
padding-right
:
12
px
;
padding-left
:
calc
(
16
px
+
1.25
rem
);
font-size
:
inherit
;
line-height
:
1.375
;
position
:
relative
;
width
:
100
%
}.
cdx-select-vue--has-start-icon
.
cdx-select-vue__handle
{
padding-right
:
calc
(
20
px
+
1.25
rem
)}.
cdx-select-vue__start-icon
.
cdx-icon
{
position
:
absolute
;
top
:
50
%
;
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
transition-property
:
color
;
transition-duration
:
.1
s
;
right
:
12
px
;
transform
:
translateY
(
-50
%
)}.
cdx-select-vue__indicator
.
cdx-icon
{
color
:
var
(
--color-base
,
#202122
);
position
:
absolute
;
top
:
50
%
;
min-width
:
12
px
;
min-height
:
12
px
;
width
:
.75
rem
;
height
:
.75
rem
;
transition-property
:
color
;
transition-duration
:
.1
s
;
left
:
12
px
;
transform
:
translateY
(
-50
%
)}.
cdx-select-vue--enabled
.
cdx-select-vue__handle
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
color
:
var
(
--color-base
,
#202122
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
);
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
hover
{
background-color
:
var
(
--background-color-base
,
#fff
);
color
:
var
(
--color-base--hover
,
#404244
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
);
cursor
:
pointer
}.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
focus
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
active
{
color
:
var
(
--color-emphasized
,
#101418
);
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
hover
.
cdx-select-vue__indicator
{
color
:
var
(
--color-base--hover
,
#404244
)}.
cdx-select-vue--enabled
.
cdx-select-vue--expanded
.
cdx-select-vue__handle
{
background-color
:
var
(
--background-color-base
,
#fff
)}.
cdx-select-vue--enabled
.
cdx-select-vue--expanded
.
cdx-select-vue__handle
.
cdx-select-vue__indicator
{
color
:
var
(
--color-base
,
#202122
)}.
cdx-select-vue--disabled
.
cdx-select-vue__handle
{
background-color
:
var
(
--background-color-disabled-subtle
,
#eaecf0
);
color
:
var
(
--color-disabled
,
#72777d
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
);
cursor
:
default
}.
cdx-select-vue--disabled
.
cdx-select-vue__indicator
,
.
cdx-select-vue--disabled
.
cdx-select-vue__start-icon
{
color
:
var
(
--color-disabled
,
#72777d
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue__handle
{
border-color
:
var
(
--border-color-error
,
#9f3526
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
hover
{
border-color
:
var
(
--border-color-error--hover
,
#fc493b
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
focus
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
)}.
cdx-dialog
.
cdx-select-vue
{
position
:
static
}.
cdx-table-pager
{
display
:
flex
;
align-items
:
center
;
flex-wrap
:
wrap
;
justify-content
:
space-between
;
gap
:
12
px
;
padding
:
12
px
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-table-pager
{
flex-wrap
:
nowrap
}}.
cdx-table-pager__start
.
cdx-select
,
.
cdx-table-pager__start
.
cdx-select-vue__handle
{
min-width
:
8
rem
}.
cdx-table-pager__center
{
color
:
var
(
--color-subtle
,
#54595d
);
flex
:
1
1
40
%
;
font-size
:
1
rem
;
text-align
:
center
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-table-pager__center
{
flex
:
0
1
auto
}}.
cdx-table-pager__end
{
display
:
flex
;
flex
:
1
0
100
%
;
justify-content
:
space-between
;
gap
:
4
px
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-table-pager__end
{
flex
:
0
1
auto
}}.
cdx-table
{
color
:
var
(
--color-base
,
#202122
);
border
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
);
border-radius
:
2
px
;
word-wrap
:
break-word
;
-webkit-
hyphens
:
auto
;
-ms-
hyphens
:
auto
;
hyphens
:
auto
}.
cdx-table__header
{
display
:
flex
;
align-items
:
center
;
flex-wrap
:
wrap
;
justify-content
:
space-between
;
gap
:
16
px
;
box-sizing
:
border-box
;
min-height
:
64
px
;
padding
:
16
px
12
px
}.
cdx-table__header__caption
{
color
:
var
(
--color-emphasized
,
#101418
);
font-size
:
1.125
rem
;
font-weight
:
700
;
line-height
:
1.25
}.
cdx-table__pagination--bottom
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}.
cdx-table__pagination-status--short
{
display
:
block
;
text-align
:
left
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-table__pagination-status--short
{
display
:
none
}}.
cdx-table__pagination-status--long
{
display
:
none
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-table__pagination-status--long
{
display
:
block
;
text-align
:
center
}}.
cdx-table__pending-indicator
{
position
:
absolute
}.
cdx-table__table-wrapper
{
position
:
relative
;
overflow-x
:
auto
}.
cdx-table__table
{
min-width
:
100
%
;
line-height
:
1.375
;
border-collapse
:
collapse
}.
cdx-table__table
caption
{
display
:
block
;
clip
:
rect
(
1
px
,
1
px
,
1
px
,
1
px
);
position
:
absolute
!important
;
width
:
1
px
;
height
:
1
px
;
margin
:
-1
px
;
border
:
0
;
padding
:
0
;
overflow
:
hidden
}.
cdx-table__table
th
,
.
cdx-table__table
td
{
padding
:
12
px
}.
cdx-table__table
th
{
color
:
var
(
--color-emphasized
,
#101418
);
text-align
:
right
}.
cdx-table__table
thead
th
{
border-bottom
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
);
vertical-align
:
bottom
}.
cdx-table__table
tfoot
td
,
.
cdx-table__table
tfoot
th
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}.
cdx-table__table
tbody
td
,
.
cdx-table__table
tbody
th
{
border-top
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
);
vertical-align
:
top
}.
cdx-table__table
tbody
tr
:
first-child
td
,
.
cdx-table__table
tbody
tr
:
first-child
th
{
border-top
:
0
}.
cdx-table__table__sort-button
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
display
:
flex
;
align-items
:
flex-end
;
gap
:
8
px
;
width
:
100
%
;
border
:
0
;
padding
:
12
px
;
font-family
:
inherit
;
font-size
:
inherit
;
font-weight
:
700
;
line-height
:
1.4285714
;
text-align
:
right
;
text-decoration
:
none
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}.
cdx-table__table__sort-button
:
hover
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
);
cursor
:
pointer
}.
cdx-table__table__sort-button
:
focus
{
outline
:
1
px
solid
transparent
}.
cdx-table__table__sort-button
:
active
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
)}.
cdx-table__table__sort-button
:
focus
:
not
(
:
active
)
{
background-color
:
var
(
--background-color-base
,
#fff
);
box-shadow
:
inset
0
0
0
2
px
var
(
--box-shadow-color-progressive--focus
,
#36c
)}.
cdx-table__table__sort-icon
{
color
:
var
(
--color-subtle
,
#54595d
);
flex-shrink
:
0
;
height
:
1.4285714
em
}.
cdx-table__table
.
cdx-table__table__cell--align-center
{
text-align
:
center
}.
cdx-table__table
.
cdx-table__table__cell--align-end
{
text-align
:
left
}.
cdx-table__table
.
cdx-table__table__cell--align-end
.
cdx-table__table__sort-button
{
flex-direction
:
row-reverse
;
text-align
:
left
}.
cdx-table__table
.
cdx-table__table__cell--align-number
{
text-align
:
right
}.
cdx-table__table
.
cdx-table__table__cell--align-number
.
cdx-table__table__sort-button
{
flex-direction
:
row
;
text-align
:
right
}.
cdx-table__table
.
cdx-table__table__cell--has-sort
{
padding
:
0
}.
cdx-table__table__select-rows
{
width
:
1
px
}.
cdx-table__table__row--selected
{
background-color
:
var
(
--background-color-progressive-subtle
,
#f1f4fd
)}.
cdx-table__table--layout-fixed
{
table-layout
:
fixed
}.
cdx-table__table--borders-vertical
th
,
.
cdx-table__table--borders-vertical
td
{
border-left
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
)}.
cdx-table__table--borders-vertical
th
:
last-child
,
.
cdx-table__table--borders-vertical
td
:
last-child
{
border-left
:
0
}.
cdx-table__table--borders-vertical
thead
tr
:
not
(
:
first-child
)
th
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}.
cdx-table__header
+
.
cdx-table__table-wrapper
.
cdx-table__table--borders-vertical
thead
th
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}.
cdx-table__table__empty-state
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}.
cdx-table__table__empty-state-content
{
color
:
var
(
--color-subtle
,
#54595d
);
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
min-height
:
40
px
}.
cdx-table__footer
{
display
:
flex
;
align-items
:
center
;
gap
:
16
px
;
box-sizing
:
border-box
;
min-height
:
64
px
;
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
);
padding
:
12
px
}.
cdx-tab
[
aria-hidden
=
true
]
{
display
:
none
}.
cdx-tab
:
focus
{
outline
:
1
px
solid
transparent
}.
cdx-tabs__header
{
display
:
flex
;
align-items
:
flex-end
;
position
:
relative
}.
cdx-tabs__prev-scroller
,
.
cdx-tabs__next-scroller
{
background-color
:
inherit
;
position
:
absolute
;
top
:
0
;
bottom
:
0
}.
cdx-tabs__prev-scroller
{
right
:
0
}.
cdx-tabs__next-scroller
{
left
:
0
}.
cdx-tabs__prev-scroller
:
after
,
.
cdx-tabs__next-scroller
:
before
{
content
:
""
;
position
:
absolute
;
top
:
0
;
z-index
:
1
;
width
:
1.5
rem
;
height
:
100
%
;
pointer-events
:
none
}.
cdx-tabs__prev-scroller
:
after
{
right
:
100
%
}.
cdx-tabs__next-scroller
:
before
{
left
:
100
%
}.
cdx-tabs__scroll-button
.
cdx-button
{
height
:
100
%
}.
cdx-tabs__list
{
display
:
flex
;
overflow-x
:
auto
;
scrollbar-width
:
none
;
-webkit-
overflow-scrolling
:
touch
}.
cdx-tabs__list
::
-webkit-scrollbar
{
-webkit-
appearance
:
none
;
display
:
none
}.
cdx-tabs__list__item
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
display
:
block
;
flex
:
0
0
auto
;
max-width
:
16
rem
;
border-width
:
0
;
border-top-right-radius
:
2
px
;
border-top-left-radius
:
2
px
;
padding
:
4
px
12
px
;
font-size
:
1
rem
;
font-weight
:
700
;
line-height
:
1.4285714
;
text-decoration
:
none
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}.
cdx-tabs__list__item
:
hover
{
cursor
:
pointer
}.
cdx-tabs__list__item
[
aria-selected
=
true
]
{
cursor
:
default
}.
cdx-tabs
>
.
cdx-tabs__header
.
cdx-tabs__list__item
+
.
cdx-tabs__list__item
{
margin-right
:
0
}.
cdx-tabs--framed
>
.
cdx-tabs__header
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
)}.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__prev-scroller
:
after
{
background-image
:
linear-gradient
(
to
left
,
var
(
--background-color-interactive
,
#eaecf0
)
0
,
var
(
--background-color-transparent
,
transparent
)
100
%
)}.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__next-scroller
:
before
{
background-image
:
linear-gradient
(
to
right
,
var
(
--background-color-interactive
,
#eaecf0
)
0
,
var
(
--background-color-transparent
,
transparent
)
100
%
)}.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__list__item
{
color
:
var
(
--color-base
,
#202122
);
margin
:
8
px
8
px
0
4
px
}.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
enabled
{
overflow
:
hidden
}.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
enabled
:
hover
{
background-color
:
var
(
--background-color-tab-list-item-framed--hover
,
rgba
(
255
,
255
,
255
,
.3
));
color
:
var
(
--color-base
,
#202122
)}.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
enabled
:
active
{
background-color
:
var
(
--background-color-tab-list-item-framed--active
,
rgba
(
255
,
255
,
255
,
.65
));
color
:
var
(
--color-base
,
#202122
)}.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__list__item
[
aria-selected
=
true
],
.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__list__item
[
aria-selected
=
true
]
:
hover
{
background-color
:
var
(
--background-color-base
,
#fff
);
color
:
var
(
--color-base
,
#202122
)}.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
disabled
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
);
color
:
var
(
--color-disabled
,
#72777d
);
cursor
:
default
}.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
last-child
{
margin-left
:
8
px
}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
{
background-color
:
var
(
--background-color-base
,
#fff
);
margin
:
0
4
px
;
border-bottom
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__prev-scroller
:
after
{
background-image
:
linear-gradient
(
to
left
,
var
(
--background-color-base
,
#fff
)
0
,
var
(
--background-color-transparent
,
transparent
)
100
%
)}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__next-scroller
:
before
{
background-image
:
linear-gradient
(
to
right
,
var
(
--background-color-base
,
#fff
)
0
,
var
(
--background-color-transparent
,
transparent
)
100
%
)}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__list__item
{
margin
:
0
2
px
}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
enabled
{
color
:
var
(
--color-base
,
#202122
)}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
enabled
:
hover
:
not
([
aria-selected
=
"true"
])
{
color
:
var
(
--color-progressive--hover
,
#4b77d6
);
box-shadow
:
inset
0
-2
px
0
0
var
(
--box-shadow-color-progressive-selected--hover
,
#4b77d6
)}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
enabled
:
active
:
not
([
aria-selected
=
"true"
])
{
color
:
var
(
--color-progressive--active
,
#233566
);
box-shadow
:
inset
0
-2
px
0
0
var
(
--box-shadow-color-progressive-selected--active
,
#233566
)}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__list__item
[
aria-selected
=
true
]
{
color
:
var
(
--color-progressive
,
#36c
);
box-shadow
:
inset
0
-2
px
0
0
var
(
--box-shadow-color-progressive-selected
,
#36c
)}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__list__item
[
aria-selected
=
true
]
:
hover
{
color
:
var
(
--color-progressive
,
#36c
)}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
disabled
{
color
:
var
(
--color-disabled
,
#72777d
);
cursor
:
default
}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
first-child
{
margin-right
:
0
}.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
last-child
{
margin-left
:
0
}.
cdx-tabs--framed
>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
focus-visible
,
.
cdx-tabs
:
not
(
.
cdx-tabs--framed
)>
.
cdx-tabs__header
.
cdx-tabs__list__item
:
focus-visible
{
box-shadow
:
inset
0
0
0
2
px
var
(
--border-color-progressive
,
#36c
);
outline
:
1
px
solid
transparent
;
overflow
:
hidden
}.
cdx-text-area
{
position
:
relative
}.
cdx-text-area
.
cdx-text-area__start-icon
{
position
:
absolute
;
top
:
4
px
;
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.5
rem
;
transition-property
:
color
;
transition-duration
:
.1
s
;
right
:
9
px
}.
cdx-text-area
.
cdx-text-area__end-icon
{
position
:
absolute
;
top
:
4
px
;
min-width
:
16
px
;
min-height
:
16
px
;
width
:
1
rem
;
height
:
1.5
rem
;
transition-property
:
color
;
transition-duration
:
.1
s
;
left
:
9
px
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-text-area__icon
.
cdx-text-area__start-icon
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
1.25
rem
,
20
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-text-area__icon
.
cdx-text-area__start-icon
{
-webkit-
mask-size
:
max
(
1.25
rem
,
20
px
);
mask-size
:
max
(
1.25
rem
,
20
px
);
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-position
:
center
;
mask-position
:
center
}}.
cdx-text-area__icon
.
cdx-text-area__end-icon
{
min-width
:
16
px
;
min-height
:
16
px
;
width
:
1
rem
;
height
:
1
rem
;
height
:
1.5
rem
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-text-area__icon
.
cdx-text-area__end-icon
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
1
rem
,
16
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-text-area__icon
.
cdx-text-area__end-icon
{
-webkit-
mask-size
:
max
(
1
rem
,
16
px
);
mask-size
:
max
(
1
rem
,
16
px
);
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-position
:
center
;
mask-position
:
center
}}.
cdx-text-area__textarea
{
display
:
block
;
box-sizing
:
border-box
;
min-height
:
64
px
;
width
:
100
%
;
border-width
:
1
px
;
border-style
:
solid
;
border-radius
:
2
px
;
padding
:
4
px
8
px
;
overflow
:
auto
;
font-family
:
inherit
;
font-size
:
inherit
;
line-height
:
1.4285714
;
resize
:
vertical
}.
cdx-text-area__textarea--is-autosize
{
resize
:
none
;
overflow
:
hidden
}.
cdx-text-area__textarea--is-autosize
::
-webkit-resizer
{
display
:
none
}.
cdx-text-area__textarea
:
enabled
{
background-color
:
var
(
--background-color-base
,
#fff
);
color
:
var
(
--color-base
,
#202122
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-transparent
,
transparent
);
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
}.
cdx-text-area__textarea
:
enabled
~
.
cdx-text-area__icon-vue
.
cdx-icon
{
color
:
var
(
--color-placeholder
,
#72777d
)}.
cdx-text-area__textarea
:
enabled
~
.
cdx-text-area__icon
{
opacity
:
var
(
--opacity-icon-placeholder
,
.51
)}.
cdx-text-area__textarea
:
enabled
:
hover
{
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-text-area__textarea
:
enabled
:
focus
~
.
cdx-text-area__icon-vue
.
cdx-icon
,
.
cdx-text-area__textarea
:
enabled
.
cdx-text-area__textarea--has-value
~
.
cdx-text-area__icon-vue
.
cdx-icon
{
color
:
var
(
--color-base
,
#202122
)}.
cdx-text-area__textarea
:
enabled
:
focus
~
.
cdx-text-area__icon
,
.
cdx-text-area__textarea
:
enabled
.
cdx-text-area__textarea--has-value
~
.
cdx-text-area__icon
{
opacity
:
1
}.
cdx-text-area__textarea
:
enabled
:
focus
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-text-area__textarea
:
enabled
:
read-only
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
)}.
cdx-text-area__textarea
:
disabled
{
background-color
:
var
(
--background-color-disabled-subtle
,
#eaecf0
);
color
:
var
(
--color-disabled
,
#72777d
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
)}.
cdx-text-area__textarea
:
disabled
~
.
cdx-text-area__icon-vue
.
cdx-icon
{
color
:
var
(
--color-disabled
,
#72777d
)}.
cdx-text-area__textarea
:
disabled
~
.
cdx-text-area__icon
{
opacity
:
var
(
--opacity-icon-base--disabled
,
.51
)}.
cdx-text-area__textarea
::
placeholder
{
color
:
var
(
--color-placeholder
,
#72777d
);
opacity
:
1
}.
cdx-text-area--has-start-icon
.
cdx-text-area__textarea
{
padding-right
:
calc
(
16
px
+
1.25
rem
)}.
cdx-text-area--has-end-icon
.
cdx-text-area__textarea
{
padding-left
:
calc
(
16
px
+
1
rem
)}.
cdx-text-area--status-error
.
cdx-text-area__textarea
:
enabled
:
not
(
:
read-only
)
{
border-color
:
var
(
--border-color-error
,
#9f3526
)}.
cdx-text-area--status-error
.
cdx-text-area__textarea
:
enabled
:
not
(
:
read-only
)
:
hover
{
border-color
:
var
(
--border-color-error--hover
,
#fc493b
)}.
cdx-text-area--status-error
.
cdx-text-area__textarea
:
enabled
:
not
(
:
read-only
)
:
focus
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
)}.
cdx-toggle-button-group
{
position
:
relative
;
z-index
:
0
;
width
:
-webkit-
fit-content
;
width
:
-moz-
fit-content
;
width
:
fit-content
;
border-radius
:
2
px
;
padding-top
:
1
px
;
padding-right
:
1
px
;
overflow
:
hidden
}.
cdx-toggle-button-group
.
cdx-toggle-button
{
position
:
relative
;
z-index
:
1
;
margin-top
:
-1
px
;
margin-right
:
-1
px
;
border-radius
:
0
}.
cdx-toggle-button-group
.
cdx-toggle-button
:
enabled
:
active
,
.
cdx-toggle-button-group
.
cdx-toggle-button
:
enabled
:
focus
{
z-index
:
3
}.
cdx-toggle-button-group
.
cdx-toggle-button
:
disabled
{
z-index
:
0
;
box-shadow
:
0
-1
px
0
0
var
(
--box-shadow-color-inverted
,
#fff
),
1
px
0
0
0
var
(
--box-shadow-color-inverted
,
#fff
)}.
cdx-toggle-button-group
.
cdx-toggle-button--toggled-on
:
enabled
{
z-index
:
2
;
box-shadow
:
0
-1
px
0
0
var
(
--box-shadow-color-inverted
,
#fff
),
1
px
0
0
0
var
(
--box-shadow-color-inverted
,
#fff
)}.
cdx-toggle-button-group
.
cdx-toggle-button--toggled-on
:
enabled
:
focus
{
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
),
inset
0
0
0
2
px
var
(
--box-shadow-color-inverted
,
#fff
),
0
0
0
1
px
var
(
--box-shadow-color-inverted
,
#fff
)}.
cdx-toggle-switch
{
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
flex-start
;
position
:
relative
;
z-index
:
0
;
margin-bottom
:
12
px
}.
cdx-toggle-switch--align-switch
{
display
:
flex
;
justify-content
:
space-between
}.
cdx-toggle-switch
:
last-child
{
margin-bottom
:
0
}.
cdx-toggle-switch__label
,
.
cdx-toggle-switch__label
.
cdx-label
{
order
:
-1
}.
cdx-toggle-switch__label
:
not
(
:
empty
),
.
cdx-toggle-switch__label
.
cdx-label
:
not
(
:
empty
)
{
padding-left
:
6
px
}.
cdx-toggle-switch
.
cdx-toggle-switch__label
.
cdx-label
{
padding-bottom
:
0
}.
cdx-toggle-switch
.
cdx-toggle-switch__label
.
cdx-label
.
cdx-label__label__text
{
font-weight
:
400
}.
cdx-toggle-switch__switch
{
transform
:
translateZ
(
0
);
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
display
:
inline-block
;
flex-shrink
:
0
;
position
:
relative
;
box-sizing
:
border-box
;
min-width
:
48
px
;
min-height
:
32
px
;
width
:
3
rem
;
height
:
2
rem
;
border-width
:
1
px
;
border-style
:
solid
;
border-color
:
var
(
--border-color-interactive
,
#72777d
);
border-radius
:
9999
px
;
overflow
:
hidden
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
}.
cdx-toggle-switch__switch
:
before
{
content
:
""
;
display
:
block
;
position
:
absolute
;
top
:
1
px
;
left
:
1
px
;
bottom
:
1
px
;
right
:
1
px
;
z-index
:
1
;
border
:
1
px
solid
var
(
--border-color-transparent
,
transparent
);
border-radius
:
9999
px
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
}.
cdx-toggle-switch__switch__grip
{
position
:
absolute
;
top
:
50
%
;
box-sizing
:
border-box
;
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
border
:
1
px
solid
var
(
--border-color-interactive
,
#72777d
);
border-radius
:
50
%
;
transform
:
translate
(
-.3125
rem
)
translateY
(
-50
%
);
transition-property
:
background-color
,
border-color
,
transform
;
transition-duration
:
.25
s
,
.1
s
,
.1
s
}.
cdx-toggle-switch__input
{
opacity
:
0
;
position
:
absolute
;
left
:
0
;
z-index
:
2
;
min-width
:
48
px
;
min-height
:
32
px
;
width
:
3
rem
;
height
:
2
rem
;
margin
:
0
;
font-size
:
inherit
}.
cdx-toggle-switch__input
:
checked
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
background-color
:
var
(
--background-color-base
,
#fff
);
border-color
:
var
(
--border-color-inverted
,
#fff
);
transform
:
translate
(
calc
(
-1
*
(
100
%
+
.0625
rem
)))
translateY
(
-50
%
)}.
cdx-toggle-switch__input
:
enabled
:
hover
,
.
cdx-toggle-switch__input
:
enabled
~
.
cdx-label
.
cdx-label__label
:
hover
,
.
cdx-toggle-switch__input
:
enabled
~
.
cdx-toggle-switch__label
:
not
(
.
cdx-label
)
:
hover
{
cursor
:
pointer
}.
cdx-toggle-switch__input
:
enabled
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
)}.
cdx-toggle-switch__input
:
enabled
:
hover
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-base
,
#fff
);
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-toggle-switch__input
:
enabled
:
hover
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-toggle-switch__input
:
enabled
:
active
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-progressive--active
,
#233566
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-toggle-switch__input
:
enabled
:
active
~
.
cdx-toggle-switch__switch
:
before
{
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-toggle-switch__input
:
enabled
:
active
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
border-color
:
var
(
--border-color-inverted
,
#fff
)}.
cdx-toggle-switch__input
:
enabled
:
focus
:
not
(
:
active
)~
.
cdx-toggle-switch__switch
{
border-color
:
var
(
--border-color-progressive
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-toggle-switch__input
:
enabled
:
focus
:
not
(
:
active
)~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
border-color
:
var
(
--border-color-progressive
,
#36c
)}.
cdx-toggle-switch__input
:
enabled
:
checked
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-input-binary--checked
,
#36c
);
border-color
:
var
(
--border-color-progressive
,
#36c
)}.
cdx-toggle-switch__input
:
enabled
:
checked
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
border-color
:
var
(
--background-color-base
,
#fff
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
hover
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-progressive--hover
,
#4b77d6
);
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
active
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-progressive--active
,
#233566
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--active
,
#233566
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
active
~
.
cdx-toggle-switch__switch
:
before
{
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
active
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
border-color
:
var
(
--border-color-inverted
,
#fff
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
focus
:
not
(
:
active
)~
.
cdx-toggle-switch__switch
{
border-color
:
var
(
--border-color-progressive
,
#36c
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
focus
:
not
(
:
active
)~
.
cdx-toggle-switch__switch
:
before
,
.
cdx-toggle-switch__input
:
enabled
:
checked
:
focus
:
not
(
:
active
)~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
border-color
:
var
(
--border-color-inverted
,
#fff
)}.
cdx-toggle-switch__input
:
disabled
{
cursor
:
default
}.
cdx-toggle-switch__input
:
disabled
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-disabled
,
#c8ccd1
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
)}.
cdx-toggle-switch__input
:
disabled
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
border-color
:
var
(
--border-color-inverted
,
#fff
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-inverted
,
#fff
)}.
cdx-toggle-switch__input
:
disabled
:
checked
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
background-color
:
var
(
--background-color-base
,
#fff
)}.
cdx-tooltip
{
background-color
:
var
(
--background-color-inverted
,
#101418
);
color
:
var
(
--color-inverted
,
#fff
);
display
:
none
;
position
:
absolute
;
z-index
:
800
;
width
:
-webkit-
max-content
;
width
:
max-content
;
max-width
:
16
rem
;
border-radius
:
2
px
;
padding
:
2
px
6
px
;
font-family
:
-
apple-system
,
BlinkMacSystemFont
,
Segoe
UI
,
Roboto
,
Inter
,
Helvetica
,
Arial
,
sans-serif
;
font-size
:
.75
rem
;
font-weight
:
400
;
line-height
:
1.25
rem
;
animation-name
:
cdx-animation-tooltip
;
animation-duration
:
.1
s
;
animation-timing-function
:
linear
;
animation-delay
:
.25
s
;
animation-fill-mode
:
both
}@
keyframes
cdx-animation-tooltip
{
0
%
{
opacity
:
0
;
transform
:
scale
(
75
%
)}
to
{
opacity
:
1
;
transform
:
scale
(
1
)}}.
cdx-typeahead-search__menu
.
cdx-menu
{
border-top-right-radius
:
0
;
border-top-left-radius
:
0
}.
cdx-typeahead-search
.
cdx-menu-item
{
padding
:
0
}.
cdx-typeahead-search
.
cdx-menu-item__content
{
padding
:
8
px
12
px
}.
cdx-typeahead-search__search-footer
.
cdx-menu-item
{
box-sizing
:
border-box
;
min-height
:
56
px
}.
cdx-typeahead-search__search-footer
.
cdx-menu-item
:
visited
{
color
:
var
(
--color-base
,
#202122
)}.
cdx-typeahead-search__search-footer
.
cdx-menu-item
:
hover
{
text-decoration
:
none
;
cursor
:
pointer
}.
cdx-typeahead-search__search-footer__icon
.
cdx-icon
{
color
:
var
(
--color-subtle
,
#54595d
)}.
cdx-typeahead-search__search-footer__active
.
cdx-menu-item
.
cdx-typeahead-search__search-footer__icon
.
cdx-icon
,
.
cdx-typeahead-search__search-footer__active
.
cdx-menu-item
.
cdx-typeahead-search__search-footer__text
{
color
:
var
(
--color-progressive
,
#36c
)}.
cdx-typeahead-search
.
cdx-typeahead-search__menu-message--has-thumbnail
{
padding-right
:
20
px
}.
cdx-typeahead-search--expanded
.
cdx-typeahead-search__input
.
cdx-search-input
.
cdx-text-input
{
border-bottom-right-radius
:
0
;
border-bottom-left-radius
:
0
}.
cdx-typeahead-search
.
cdx-text-input--has-start-icon
.
cdx-text-input__input
{
padding-right
:
36
px
}.
cdx-typeahead-search--show-thumbnail
.
cdx-typeahead-search--auto-expand-width
:
not
(
.
cdx-typeahead-search--expanded
)
{
margin-right
:
24
px
}.
cdx-typeahead-search--show-thumbnail
:
not
(
.
cdx-typeahead-search--auto-expand-width
),
.
cdx-typeahead-search--show-thumbnail
.
cdx-typeahead-search--auto-expand-width
.
cdx-typeahead-search--expanded
{
margin-right
:
0
}.
cdx-typeahead-search--show-thumbnail
:
not
(
.
cdx-typeahead-search--auto-expand-width
)
.
cdx-text-input__input
,
.
cdx-typeahead-search--show-thumbnail
.
cdx-typeahead-search--auto-expand-width
.
cdx-typeahead-search--expanded
.
cdx-text-input__input
{
padding-right
:
60
px
}.
cdx-typeahead-search--show-thumbnail
:
not
(
.
cdx-typeahead-search--auto-expand-width
)
.
cdx-text-input__start-icon
,
.
cdx-typeahead-search--show-thumbnail
.
cdx-typeahead-search--auto-expand-width
.
cdx-typeahead-search--expanded
.
cdx-text-input__start-icon
{
position
:
absolute
;
top
:
50
%
;
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
transition-property
:
color
;
transition-duration
:
.1
s
;
right
:
22
px
;
transform
:
translateY
(
-50
%
)}.
cdx-typeahead-search--show-thumbnail
.
cdx-typeahead-search__search-footer__icon
{
flex-shrink
:
0
;
min-width
:
40
px
;
width
:
2.5
rem
}.
cdx-typeahead-search
.
cdx-menu-item
:
first-child
.
cdx-typeahead-search__search-footer
{
border-top
:
unset
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Tue, Aug 18, 23:24 (1 d, 6 h)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
51/90/6e515cce038fe6dd0229ed0972be
Default Alt Text
codex.style-rtl.css (110 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment