Alert
height: 24px;
width: 559px;
border-radius: ;
border: 1px #000000;
background: #0064ca;
opacity: 1;
color: #010101;
height: 24px;
width: 559px;
border-radius: ;
border: 1px #000000;
background: #e5004c;
opacity: 1;
color: #010101;
height: 24px;
width: 559px;
border-radius: ;
border: 1px #000000;
background: #1aac60;
opacity: 1;
color: #000000;
height: 24px;
width: 559px;
border-radius: ;
border: 1px #000000;
background: #ffc002;
opacity: 1;
color: #000000;
height: 24px;
width: 559px;
border-radius: ;
border: 1px #000000;
background: #35434d;
opacity: 1;
color: #010101;
On top of content
height: 209px;
width: 774px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
On top of page
height: 184px;
width: 944px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Dialog
Alert dialogs
height: 192px;
width: 412px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 192px;
width: 417px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 192px;
width: 417px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 192px;
width: 417px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Severe alert dialog
height: 192px;
width: 378px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 192px;
width: 377px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Form dialogs
height: 352px;
width: 328px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 431px;
width: 395px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Commercial dialog
height: 415px;
width: 674px;
border-radius: 4;
border: 2px #000000;
background: #000000;
opacity: 1;
color: ;
Notification
Basic notification
height: 118px;
width: 380px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Variations
height: 190px;
width: 295px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 192px;
width: 323px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Stacked notifications
height: 299px;
width: 440px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Top notifications
height: 254px;
width: 591px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 253px;
width: 590px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Bottom notifications
height: 253px;
width: 590px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 253px;
width: 590px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Tooltip
Tooltip with light and dark background
height: 37px;
width: 104px;
border-radius: ;
border: 1px #000000;
background: #323435;
opacity: 1;
color: #010101;
height: 37px;
width: 104px;
border-radius: ;
border: 1px SOLID #f1f2f3;
background: #ffffff;
opacity: 1;
color: #000000;
Pointing up
height: 54px;
width: 164px;
border-radius: ;
border: 1px #000000;
background: #323435;
opacity: 1;
color: #010101;
Tooltip pointing left and right
height: 64px;
width: 130px;
border-radius: ;
border: 1px #000000;
background: #323435;
opacity: 1;
color: #010101;
height: 64px;
width: 125px;
border-radius: ;
border: 1px #000000;
background: #323435;
opacity: 1;
color: #010101;
