.
mc-modal
*,
.
mc-modal
*
:
before
,
.
mc-modal
*
:
after
{
box-sizing
:
border-box
;
}
.
mc-modal
,
.
mc-modal
*
{
font-family
:
-
apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
Roboto
,
"Oxygen-Sans"
,
Ubuntu
,
Cantarell
,
Lato
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
}
/* Back button */
.
mc-back
{
cursor
:
pointer
;
position
:
absolute
;
top
:
20
px
;
left
:
20
px
;
opacity
:
0.5
;
background
:
transparent
;
border
:
0
;
padding
:
0
;
}
.
mc-back
:
hover
{
opacity
:
1
;
}
body
.
rtl
.
mc-icon-back
{
transform
:
rotate
(
180
deg
);
}
/* Modal Screen */
.
mc-modal-screen
{
position
:
fixed
;
top
:
0
;
left
:
0
;
z-index
:
100
;
background
:
rgba
(
255
,
255
,
255
,
0.65
);
width
:
100
%
;
height
:
100
%
;
display
:
none
;
}
/* Modal Box */
.
mc-modal
{
position
:
absolute
;
top
:
50
%
;
left
:
50
%
;
transform
:
translate
(
-50
%
,
-50
%
);
z-index
:
110
;
background
:
#fff
;
padding
:
50
px
20
px
20
px
;
text-align
:
center
;
color
:
#000
;
font-size
:
15
px
;
line-height
:
1.4
;
border
:
1
px
solid
#a2a9b1
;
border-radius
:
2
px
;
box-shadow
:
0
2
px
2
px
0
rgba
(
0
,
0
,
0
,
0.2
);
width
:
90
%
;
max-width
:
600
px
;
max-height
:
90
vh
;
overflow
:
auto
;
}
@
media
(
min-width
:
720px
)
{
.
mc-modal
{
padding
:
50
px
40
px
40
px
;
}
}
.
mc-modal
h2
{
line-height
:
1.3
;
border
:
0
;
font-size
:
17
px
;
font-weight
:
bold
;
margin
:
0
0
20
px
0
;
}
.
mc-text
{
margin-bottom
:
20
px
;
}
.
mc-button
{
width
:
100
%
;
min-height
:
64
px
;
padding
:
12
px
;
margin-top
:
12
px
;
font-size
:
17
px
;
font-weight
:
bold
;
background-color
:
#36c
;
border
:
1
px
solid
#36c
;
border-radius
:
2
px
;
outline
:
0
;
color
:
#fff
;
cursor
:
pointer
;
transition
:
all
0.25
s
ease-in-out
;
}
.
mc-button
:
focus
{
outline
:
0
;
border-color
:
#36c
!important
;
box-shadow
:
inset
0
0
0
1
px
#36c
,
inset
0
0
0
2
px
#fff
;
}
.
mc-button
:
hover
{
background-color
:
#447ff5
;
border-color
:
#447ff5
;
}
.
mc-button
:
active
{
background-color
:
#2a4b8d
;
border-color
:
#2a4b8d
;
box-shadow
:
none
;
}
.
mc-link
{
color
:
#36c
;
font-weight
:
bold
;
background
:
transparent
;
border
:
0
;
margin-top
:
12
px
;
padding
:
10
px
12
px
;
font-size
:
15
px
;
cursor
:
pointer
;
}
.
mc-link
:
hover
{
color
:
#447ff5
;
text-decoration
:
underline
;
}
.
mc-edit-amount
label
{
display
:
block
;
margin
:
1
em
0
;
}
.
mc-other-amount
{
font-size
:
200
%
;
}
#
mc-other-amount-input
{
width
:
30
%
;
font-size
:
100
%
;
border
:
0
;
outline
:
0
;
border-bottom
:
1
px
solid
#000
;
text-align
:
center
;
}
/* Error messages */
.
mc-error
{
display
:
none
;
font-size
:
14
px
;
color
:
#d73333
;
}