pip-webui
Version:
HTML5 UI for LOB applications
1,609 lines (1,515 loc) • 711 kB
CSS
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.0.8
*/
html, body {
height: 100%;
color: rgba(0, 0, 0, 0.87);
background: white;
position: relative; }
body {
margin: 0;
padding: 0; }
[tabindex='-1']:focus {
outline: none; }
.inset {
padding: 10px; }
button.md-no-style {
font-weight: normal;
background-color: inherit;
text-align: left;
border: none;
padding: 0;
margin: 0; }
select,
button,
textarea,
input {
vertical-align: baseline; }
input[type="reset"],
input[type="submit"],
html input[type="button"],
button {
cursor: pointer;
-webkit-appearance: button; }
input[type="reset"][disabled],
input[type="submit"][disabled],
html input[type="button"][disabled],
button[disabled] {
cursor: default; }
textarea {
vertical-align: top;
overflow: auto; }
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
-webkit-box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; }
.md-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
text-transform: none;
width: 1px; }
.md-shadow {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: inherit;
pointer-events: none; }
.md-shadow-bottom-z-1 {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
.md-shadow-bottom-z-2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); }
.md-shadow-animated.md-shadow {
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
/*
* A container inside of a rippling element (eg a button),
* which contains all of the individual ripples
*/
.md-ripple-container {
pointer-events: none;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1); }
.md-ripple {
position: absolute;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0;
border-radius: 50%; }
.md-ripple.md-ripple-placed {
transition: margin 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), border 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: margin 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), border 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1); }
.md-ripple.md-ripple-scaled {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1); }
.md-ripple.md-ripple-active, .md-ripple.md-ripple-full, .md-ripple.md-ripple-visible {
opacity: 0.20; }
.md-padding {
padding: 8px; }
.md-margin {
margin: 8px; }
.md-scroll-mask {
position: absolute;
background-color: transparent;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.md-scroll-mask > .md-scroll-mask-bar {
display: block;
position: absolute;
background-color: #fafafa;
right: 0;
top: 0;
bottom: 0;
z-index: 65;
box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.3); }
@media (min-width: 1200px) {
.md-padding {
padding: 16px; } }
html, body {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
min-height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
/************
* Headings
************/
.md-display-4 {
font-size: 112px;
font-weight: 300;
letter-spacing: -0.010em;
line-height: 112px; }
.md-display-3 {
font-size: 56px;
font-weight: 400;
letter-spacing: -0.005em;
line-height: 56px; }
.md-display-2 {
font-size: 45px;
font-weight: 400;
line-height: 64px; }
.md-display-1 {
font-size: 34px;
font-weight: 400;
line-height: 40px; }
.md-headline {
font-size: 24px;
font-weight: 400;
line-height: 32px; }
.md-title {
font-size: 20px;
font-weight: 500;
letter-spacing: 0.005em; }
.md-subhead {
font-size: 16px;
font-weight: 400;
letter-spacing: 0.010em;
line-height: 24px; }
/************
* Body Copy
************/
.md-body-1 {
font-size: 14px;
font-weight: 400;
letter-spacing: 0.010em;
line-height: 20px; }
.md-body-2 {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.010em;
line-height: 24px; }
.md-caption {
font-size: 12px;
letter-spacing: 0.020em; }
.md-button {
letter-spacing: 0.010em; }
/************
* Defaults
************/
button,
select,
html,
textarea,
input {
font-family: Roboto, "Helvetica Neue", sans-serif; }
select,
button,
textarea,
input {
font-size: 100%; }
@-webkit-keyframes md-autocomplete-list-out {
0% {
-webkit-animation-timing-function: linear;
animation-timing-function: linear; }
50% {
opacity: 0;
height: 40px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
100% {
height: 0;
opacity: 0; } }
@keyframes md-autocomplete-list-out {
0% {
-webkit-animation-timing-function: linear;
animation-timing-function: linear; }
50% {
opacity: 0;
height: 40px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
100% {
height: 0;
opacity: 0; } }
@-webkit-keyframes md-autocomplete-list-in {
0% {
opacity: 0;
height: 0;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
50% {
opacity: 0;
height: 40px; }
100% {
opacity: 1;
height: 40px; } }
@keyframes md-autocomplete-list-in {
0% {
opacity: 0;
height: 0;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
50% {
opacity: 0;
height: 40px; }
100% {
opacity: 1;
height: 40px; } }
md-autocomplete {
border-radius: 2px;
display: block;
height: 40px;
position: relative;
overflow: visible;
min-width: 190px; }
md-autocomplete[disabled] input {
cursor: default; }
md-autocomplete[md-floating-label] {
border-radius: 0;
background: transparent;
height: auto; }
md-autocomplete[md-floating-label] md-input-container {
padding-bottom: 26px; }
md-autocomplete[md-floating-label] md-input-container.md-input-has-messages {
padding-bottom: 2px; }
md-autocomplete[md-floating-label] md-autocomplete-wrap {
height: auto; }
md-autocomplete[md-floating-label] button {
position: absolute;
top: auto;
bottom: 0;
right: 0;
width: 30px;
height: 30px; }
md-autocomplete md-autocomplete-wrap {
display: block;
position: relative;
overflow: visible;
height: 40px; }
md-autocomplete md-autocomplete-wrap.md-menu-showing {
z-index: 51; }
md-autocomplete md-autocomplete-wrap md-progress-linear {
position: absolute;
bottom: -2px;
left: 0; }
md-autocomplete md-autocomplete-wrap md-progress-linear.md-inline {
bottom: 40px;
right: 2px;
left: 2px;
width: auto; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
transition: none; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate .md-container {
transition: none;
height: 3px; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-enter {
transition: opacity 0.15s linear; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-enter.ng-enter-active {
opacity: 1; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-leave {
transition: opacity 0.15s linear; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-leave.ng-leave-active {
opacity: 0; }
md-autocomplete input:not(.md-input) {
font-size: 14px;
box-sizing: border-box;
border: none;
box-shadow: none;
outline: none;
background: transparent;
width: 100%;
padding: 0 15px;
line-height: 40px;
height: 40px; }
md-autocomplete input:not(.md-input)::-ms-clear {
display: none; }
md-autocomplete button {
position: relative;
line-height: 20px;
text-align: center;
width: 30px;
height: 30px;
cursor: pointer;
border: none;
border-radius: 50%;
padding: 0;
font-size: 12px;
background: transparent;
margin: auto 5px; }
md-autocomplete button:after {
content: '';
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
md-autocomplete button:focus {
outline: none; }
md-autocomplete button:focus:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
md-autocomplete button md-icon {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0) scale(0.9);
transform: translate3d(-50%, -50%, 0) scale(0.9); }
md-autocomplete button md-icon path {
stroke-width: 0; }
md-autocomplete button.ng-enter {
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform 0.15s ease-out;
transition: transform 0.15s ease-out; }
md-autocomplete button.ng-enter.ng-enter-active {
-webkit-transform: scale(1);
transform: scale(1); }
md-autocomplete button.ng-leave {
transition: -webkit-transform 0.15s ease-out;
transition: transform 0.15s ease-out; }
md-autocomplete button.ng-leave.ng-leave-active {
-webkit-transform: scale(0);
transform: scale(0); }
@media screen and (-ms-high-contrast: active) {
md-autocomplete input {
border: 1px solid #fff; }
md-autocomplete li:focus {
color: #fff; } }
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
position: absolute;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
height: 225.5px;
max-height: 225.5px;
z-index: 100; }
.md-virtual-repeat-container.md-not-found {
height: 48px; }
.md-autocomplete-suggestions {
margin: 0;
list-style: none;
padding: 0; }
.md-autocomplete-suggestions li {
font-size: 14px;
overflow: hidden;
padding: 0 15px;
line-height: 48px;
height: 48px;
transition: background 0.15s linear;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis; }
.md-autocomplete-suggestions li:focus {
outline: none; }
.md-autocomplete-suggestions li:not(.md-not-found-wrapper) {
cursor: pointer; }
@media screen and (-ms-high-contrast: active) {
md-autocomplete,
.md-autocomplete-suggestions {
border: 1px solid #fff; } }
md-backdrop {
transition: opacity 450ms;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 50; }
md-backdrop.md-menu-backdrop {
position: fixed !important;
z-index: 99; }
md-backdrop.md-select-backdrop {
z-index: 81;
transition-duration: 0; }
md-backdrop.md-dialog-backdrop {
z-index: 79; }
md-backdrop.md-bottom-sheet-backdrop {
z-index: 69; }
md-backdrop.md-sidenav-backdrop {
z-index: 59; }
md-backdrop.md-click-catcher {
position: absolute; }
md-backdrop.md-opaque {
opacity: .48; }
md-backdrop.md-opaque.ng-enter {
opacity: 0; }
md-backdrop.md-opaque.ng-enter.md-opaque.ng-enter-active {
opacity: .48; }
md-backdrop.md-opaque.ng-leave {
opacity: .48;
transition: opacity 400ms; }
md-backdrop.md-opaque.ng-leave.md-opaque.ng-leave-active {
opacity: 0; }
md-bottom-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 8px 16px 88px 16px;
z-index: 70;
border-top-width: 1px;
border-top-style: solid;
-webkit-transform: translate3d(0, 80px, 0);
transform: translate3d(0, 80px, 0);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition-property: -webkit-transform;
transition-property: transform; }
md-bottom-sheet.md-has-header {
padding-top: 0; }
md-bottom-sheet.ng-enter {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
md-bottom-sheet.ng-enter-active {
opacity: 1;
display: block;
-webkit-transform: translate3d(0, 80px, 0) !important;
transform: translate3d(0, 80px, 0) !important; }
md-bottom-sheet.ng-leave-active {
-webkit-transform: translate3d(0, 100%, 0) !important;
transform: translate3d(0, 100%, 0) !important;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-bottom-sheet .md-subheader {
background-color: transparent;
font-family: Roboto, "Helvetica Neue", sans-serif;
line-height: 56px;
padding: 0;
white-space: nowrap; }
md-bottom-sheet md-inline-icon {
display: inline-block;
height: 24px;
width: 24px;
fill: #444; }
md-bottom-sheet md-list-item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
outline: none; }
md-bottom-sheet md-list-item:hover {
cursor: pointer; }
md-bottom-sheet.md-list md-list-item {
padding: 0;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 48px; }
md-bottom-sheet.md-list md-list-item div.md-icon-container {
display: inline-block;
height: 24px;
margin-right: 32px; }
md-bottom-sheet.md-grid {
padding-left: 24px;
padding-right: 24px;
padding-top: 0; }
md-bottom-sheet.md-grid md-list {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
transition: all 0.5s;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
md-bottom-sheet.md-grid md-list-item {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
transition: all 0.5s;
height: 96px;
margin-top: 8px;
margin-bottom: 8px;
/* Mixin for how many grid items to show per row */ }
@media screen and (max-width: 1200px) {
md-bottom-sheet.md-grid md-list-item {
-webkit-flex: 1 1 33.33333%;
-ms-flex: 1 1 33.33333%;
flex: 1 1 33.33333%;
max-width: 33.33333%; }
md-bottom-sheet.md-grid md-list-item:nth-of-type(3n + 1) {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start; }
md-bottom-sheet.md-grid md-list-item:nth-of-type(3n) {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end; } }
@media screen and (min-width: 1200px) and (max-width: 1279px) {
md-bottom-sheet.md-grid md-list-item {
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
max-width: 25%; } }
@media screen and (min-width: 1280px) and (max-width: 1919px) {
md-bottom-sheet.md-grid md-list-item {
-webkit-flex: 1 1 16.66667%;
-ms-flex: 1 1 16.66667%;
flex: 1 1 16.66667%;
max-width: 16.66667%; } }
@media screen and (min-width: 1920px) {
md-bottom-sheet.md-grid md-list-item {
-webkit-flex: 1 1 14.28571%;
-ms-flex: 1 1 14.28571%;
flex: 1 1 14.28571%;
max-width: 14.28571%; } }
md-bottom-sheet.md-grid md-list-item .md-list-item-content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 48px;
padding-bottom: 16px; }
md-bottom-sheet.md-grid md-list-item .md-grid-item-content {
border: 1px solid transparent;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 80px; }
md-bottom-sheet.md-grid md-list-item .md-icon-container {
display: inline-block;
box-sizing: border-box;
height: 48px;
width: 48px;
margin: 0 0; }
md-bottom-sheet.md-grid md-list-item .md-grid-text {
font-weight: 400;
line-height: 16px;
font-size: 13px;
margin: 0;
white-space: nowrap;
width: 64px;
text-align: center;
text-transform: none;
padding-top: 8px; }
@media screen and (-ms-high-contrast: active) {
md-bottom-sheet {
border: 1px solid #fff; } }
button.md-button::-moz-focus-inner {
border: 0; }
.md-button {
border-radius: 3px;
box-sizing: border-box;
color: currentColor;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
outline: none;
border: 0;
display: inline-block;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 6px;
margin: 6px 8px;
line-height: 36px;
min-height: 36px;
background: transparent;
white-space: nowrap;
min-width: 88px;
text-align: center;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
font-style: inherit;
font-variant: inherit;
font-family: inherit;
text-decoration: none;
cursor: pointer;
overflow: hidden;
transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.md-button:focus {
outline: none; }
.md-button:hover, .md-button:focus {
text-decoration: none; }
.md-button.ng-hide, .md-button.ng-leave {
transition: none; }
.md-button.md-cornered {
border-radius: 0; }
.md-button.md-icon {
padding: 0;
background: none; }
.md-button.md-raised:not([disabled]) {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
.md-button.md-icon-button {
margin: 0 6px;
height: 40px;
min-width: 0;
line-height: 24px;
padding: 8px;
width: 40px;
border-radius: 50%; }
.md-button.md-icon-button .md-ripple-container {
border-radius: 50%;
background-clip: padding-box;
overflow: hidden;
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); }
.md-button.md-fab {
z-index: 20;
line-height: 56px;
min-width: 0;
width: 56px;
height: 56px;
vertical-align: middle;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 50%;
background-clip: padding-box;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
transition-property: background-color, box-shadow, -webkit-transform;
transition-property: background-color, box-shadow, transform; }
.md-button.md-fab.md-fab-bottom-right {
top: auto;
right: 20px;
bottom: 20px;
left: auto;
position: absolute; }
.md-button.md-fab.md-fab-bottom-left {
top: auto;
right: auto;
bottom: 20px;
left: 20px;
position: absolute; }
.md-button.md-fab.md-fab-top-right {
top: 20px;
right: 20px;
bottom: auto;
left: auto;
position: absolute; }
.md-button.md-fab.md-fab-top-left {
top: 20px;
right: auto;
bottom: auto;
left: 20px;
position: absolute; }
.md-button.md-fab .md-ripple-container {
border-radius: 50%;
background-clip: padding-box;
overflow: hidden;
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); }
.md-button.md-fab.md-mini {
line-height: 40px;
width: 40px;
height: 40px; }
.md-button.md-fab.ng-hide, .md-button.md-fab.ng-leave {
transition: none; }
.md-button:not([disabled]).md-raised.md-focused, .md-button:not([disabled]).md-fab.md-focused {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
.md-button:not([disabled]).md-raised:active, .md-button:not([disabled]).md-fab:active {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); }
.md-button .md-ripple-container {
border-radius: 3px;
background-clip: padding-box;
overflow: hidden;
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); }
.md-toast-open-top .md-button.md-fab-top-left,
.md-toast-open-top .md-button.md-fab-top-right {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transform: translate3d(0, 42px, 0);
transform: translate3d(0, 42px, 0); }
.md-toast-open-top .md-button.md-fab-top-left:not([disabled]).md-focused, .md-toast-open-top .md-button.md-fab-top-left:not([disabled]):hover,
.md-toast-open-top .md-button.md-fab-top-right:not([disabled]).md-focused,
.md-toast-open-top .md-button.md-fab-top-right:not([disabled]):hover {
-webkit-transform: translate3d(0, 41px, 0);
transform: translate3d(0, 41px, 0); }
.md-toast-open-bottom .md-button.md-fab-bottom-left,
.md-toast-open-bottom .md-button.md-fab-bottom-right {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transform: translate3d(0, -42px, 0);
transform: translate3d(0, -42px, 0); }
.md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]).md-focused, .md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]):hover,
.md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]).md-focused,
.md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]):hover {
-webkit-transform: translate3d(0, -43px, 0);
transform: translate3d(0, -43px, 0); }
.md-button-group {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%; }
.md-button-group > .md-button {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
overflow: hidden;
width: 0;
border-width: 1px 0px 1px 1px;
border-radius: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap; }
.md-button-group > .md-button:first-child {
border-radius: 2px 0px 0px 2px; }
.md-button-group > .md-button:last-child {
border-right-width: 1px;
border-radius: 0px 2px 2px 0px; }
@media screen and (-ms-high-contrast: active) {
.md-button.md-raised,
.md-button.md-fab {
border: 1px solid #fff; } }
md-card {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 8px;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); }
md-card md-card-header {
padding: 16px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
md-card md-card-header:first-child md-card-avatar {
margin-right: 12px; }
md-card md-card-header:last-child md-card-avatar {
margin-left: 12px; }
md-card md-card-header md-card-avatar {
width: 40px;
height: 40px; }
md-card md-card-header md-card-avatar .md-user-avatar,
md-card md-card-header md-card-avatar md-icon {
border-radius: 50%; }
md-card md-card-header md-card-avatar md-icon {
padding: 8px; }
md-card md-card-header md-card-avatar + md-card-header-text {
max-height: 40px; }
md-card md-card-header md-card-avatar + md-card-header-text .md-title {
font-size: 14px; }
md-card md-card-header md-card-header-text {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
md-card md-card-header md-card-header-text .md-subhead {
font-size: 14px; }
md-card > img,
md-card > :not(md-card-content) img {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%;
height: auto; }
md-card md-card-title {
padding: 24px 16px 16px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
md-card md-card-title + md-card-content {
padding-top: 0; }
md-card md-card-title md-card-title-text {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
md-card md-card-title md-card-title-text .md-subhead {
padding-top: 0;
font-size: 14px; }
md-card md-card-title md-card-title-text:only-child .md-subhead {
padding-top: 12px; }
md-card md-card-title md-card-title-media {
margin-top: -8px; }
md-card md-card-title md-card-title-media .md-media-sm {
height: 80px;
width: 80px; }
md-card md-card-title md-card-title-media .md-media-md {
height: 112px;
width: 112px; }
md-card md-card-title md-card-title-media .md-media-lg {
height: 152px;
width: 152px; }
md-card md-card-content {
display: block;
padding: 16px; }
md-card md-card-content > p:first-child {
margin-top: 0; }
md-card md-card-content > p:last-child {
margin-bottom: 0; }
md-card md-card-content .md-media-xl {
height: 240px;
width: 240px; }
md-card .md-actions, md-card md-card-actions {
margin: 8px; }
md-card .md-actions.layout-column .md-button:not(.md-icon-button), md-card md-card-actions.layout-column .md-button:not(.md-icon-button) {
margin: 2px 0; }
md-card .md-actions.layout-column .md-button:not(.md-icon-button):first-of-type, md-card md-card-actions.layout-column .md-button:not(.md-icon-button):first-of-type {
margin-top: 0; }
md-card .md-actions.layout-column .md-button:not(.md-icon-button):last-of-type, md-card md-card-actions.layout-column .md-button:not(.md-icon-button):last-of-type {
margin-bottom: 0; }
md-card .md-actions.layout-column .md-button.md-icon-button, md-card md-card-actions.layout-column .md-button.md-icon-button {
margin-top: 6px;
margin-bottom: 6px; }
md-card .md-actions md-card-icon-actions, md-card md-card-actions md-card-icon-actions {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button), md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button) {
margin: 0 4px; }
md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type, md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type {
margin-left: 0; }
md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type, md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type {
margin-right: 0; }
md-card .md-actions:not(.layout-column) .md-button.md-icon-button, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button {
margin-left: 6px;
margin-right: 6px; }
md-card .md-actions:not(.layout-column) .md-button.md-icon-button:first-of-type, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:first-of-type {
margin-left: 12px; }
md-card .md-actions:not(.layout-column) .md-button.md-icon-button:last-of-type, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:last-of-type {
margin-right: 12px; }
md-card .md-actions:not(.layout-column) .md-button + md-card-icon-actions, md-card md-card-actions:not(.layout-column) .md-button + md-card-icon-actions {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
md-card md-card-footer {
margin-top: auto;
padding: 16px; }
@media screen and (-ms-high-contrast: active) {
md-card {
border: 1px solid #fff; } }
.md-inline-form md-checkbox {
margin: 19px 0 18px; }
md-checkbox {
box-sizing: border-box;
display: inline-block;
margin-bottom: 16px;
white-space: nowrap;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
min-width: 20px;
min-height: 20px;
margin-left: 0;
margin-right: 16px; }
html[dir=rtl] md-checkbox {
margin-left: 16px;
unicode-bidi: embed; }
body[dir=rtl] md-checkbox {
margin-left: 16px;
unicode-bidi: embed; }
md-checkbox bdo[dir=rtl] {
direction: rtl;
unicode-bidi: bidi-override; }
md-checkbox bdo[dir=ltr] {
direction: ltr;
unicode-bidi: bidi-override; }
html[dir=rtl] md-checkbox {
margin-right: 0;
unicode-bidi: embed; }
body[dir=rtl] md-checkbox {
margin-right: 0;
unicode-bidi: embed; }
md-checkbox bdo[dir=rtl] {
direction: rtl;
unicode-bidi: bidi-override; }
md-checkbox bdo[dir=ltr] {
direction: ltr;
unicode-bidi: bidi-override; }
md-checkbox:last-of-type {
margin-left: 0;
margin-right: 0; }
md-checkbox.md-focused:not([disabled]) .md-container:before {
left: -8px;
top: -8px;
right: -8px;
bottom: -8px; }
md-checkbox.md-focused:not([disabled]):not(.md-checked) .md-container:before {
background-color: rgba(0, 0, 0, 0.12); }
md-checkbox.md-align-top-left > div.md-container {
top: 12px; }
md-checkbox .md-container {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
box-sizing: border-box;
display: inline-block;
width: 20px;
height: 20px;
left: 0;
right: auto; }
html[dir=rtl] md-checkbox .md-container {
left: auto;
unicode-bidi: embed; }
body[dir=rtl] md-checkbox .md-container {
left: auto;
unicode-bidi: embed; }
md-checkbox .md-container bdo[dir=rtl] {
direction: rtl;
unicode-bidi: bidi-override; }
md-checkbox .md-container bdo[dir=ltr] {
direction: ltr;
unicode-bidi: bidi-override; }
html[dir=rtl] md-checkbox .md-container {
right: 0;
unicode-bidi: embed; }
body[dir=rtl] md-checkbox .md-container {
right: 0;
unicode-bidi: embed; }
md-checkbox .md-container bdo[dir=rtl] {
direction: rtl;
unicode-bidi: bidi-override; }
md-checkbox .md-container bdo[dir=ltr] {
direction: ltr;
unicode-bidi: bidi-override; }
md-checkbox .md-container:before {
box-sizing: border-box;
background-color: transparent;
border-radius: 50%;
content: '';
position: absolute;
display: block;
height: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
transition: all 0.5s;
width: auto; }
md-checkbox .md-container:after {
box-sizing: border-box;
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px; }
md-checkbox .md-container .md-ripple-container {
position: absolute;
display: block;
width: auto;
height: auto;
left: -15px;
top: -15px;
right: -15px;
bottom: -15px; }
md-checkbox .md-icon {
box-sizing: border-box;
transition: 240ms;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border-width: 2px;
border-style: solid;
border-radius: 2px; }
md-checkbox.md-checked .md-icon {
border: none; }
md-checkbox.md-checked .md-icon:after {
box-sizing: border-box;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 6.66667px;
top: 2.22222px;
display: table;
width: 6.66667px;
height: 13.33333px;
border-width: 2px;
border-style: solid;
border-top: 0;
border-left: 0;
content: ''; }
md-checkbox[disabled] {
cursor: default; }
md-checkbox.md-indeterminate .md-icon:after {
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: table;
width: 12px;
height: 2px;
border-width: 2px;
border-style: solid;
border-top: 0;
border-left: 0;
content: ''; }
md-checkbox .md-label {
box-sizing: border-box;
position: relative;
display: inline-block;
vertical-align: middle;
white-space: normal;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
margin-left: 30px;
margin-right: 0; }
html[dir=rtl] md-checkbox .md-label {
margin-left: 0;
unicode-bidi: embed; }
body[dir=rtl] md-checkbox .md-label {
margin-left: 0;
unicode-bidi: embed; }
md-checkbox .md-label bdo[dir=rtl] {
direction: rtl;
unicode-bidi: bidi-override; }
md-checkbox .md-label bdo[dir=ltr] {
direction: ltr;
unicode-bidi: bidi-override; }
html[dir=rtl] md-checkbox .md-label {
margin-right: 30px;
unicode-bidi: embed; }
body[dir=rtl] md-checkbox .md-label {
margin-right: 30px;
unicode-bidi: embed; }
md-checkbox .md-label bdo[dir=rtl] {
direction: rtl;
unicode-bidi: bidi-override; }
md-checkbox .md-label bdo[dir=ltr] {
direction: ltr;
unicode-bidi: bidi-override; }
.md-contact-chips .md-chips .md-chip {
padding: 0 25px 0 0; }
.md-contact-chips .md-chips .md-chip .md-contact-avatar {
float: left; }
.md-contact-chips .md-chips .md-chip .md-contact-avatar img {
height: 32px;
border-radius: 16px; }
.md-contact-chips .md-chips .md-chip .md-contact-name {
display: inline-block;
height: 32px;
margin-left: 8px; }
.md-contact-suggestion {
height: 56px; }
.md-contact-suggestion img {
height: 40px;
border-radius: 20px;
margin-top: 8px; }
.md-contact-suggestion .md-contact-name {
margin-left: 8px;
width: 120px; }
.md-contact-suggestion .md-contact-name, .md-contact-suggestion .md-contact-email {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis; }
.md-contact-chips-suggestions li {
height: 100%; }
.md-chips {
display: block;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 16px;
padding: 0 0 8px 3px;
vertical-align: middle; }
.md-chips:after {
content: '';
display: table;
clear: both; }
.md-chips:not(.md-readonly) {
cursor: text; }
.md-chips:not(.md-readonly) .md-chip:not(.md-readonly) {
padding-right: 22px; }
.md-chips:not(.md-readonly) .md-chip:not(.md-readonly) .md-chip-content {
padding-right: 4px; }
.md-chips .md-chip {
cursor: default;
border-radius: 16px;
display: block;
height: 32px;
line-height: 32px;
margin: 8px 8px 0 0;
padding: 0 12px 0 12px;
float: left;
box-sizing: border-box;
max-width: 100%;
position: relative; }
.md-chips .md-chip .md-chip-content {
display: block;
float: left;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis; }
.md-chips .md-chip .md-chip-content:focus {
outline: none; }
.md-chips .md-chip .md-chip-remove-container {
position: absolute;
right: 0;
line-height: 22px; }
.md-chips .md-chip .md-chip-remove {
text-align: center;
width: 32px;
height: 32px;
min-width: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
margin: 0;
position: relative; }
.md-chips .md-chip .md-chip-remove md-icon {
height: 18px;
width: 18px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0); }
.md-chips .md-chip-input-container {
display: block;
line-height: 32px;
margin: 8px 8px 0 0;
padding: 0;
float: left; }
.md-chips .md-chip-input-container input:not([type]), .md-chips .md-chip-input-container input[type="email"], .md-chips .md-chip-input-container input[type="number"], .md-chips .md-chip-input-container input[type="tel"], .md-chips .md-chip-input-container input[type="url"], .md-chips .md-chip-input-container input[type="text"] {
border: 0;
height: 32px;
line-height: 32px;
padding: 0; }
.md-chips .md-chip-input-container input:not([type]):focus, .md-chips .md-chip-input-container input[type="email"]:focus, .md-chips .md-chip-input-container input[type="number"]:focus, .md-chips .md-chip-input-container input[type="tel"]:focus, .md-chips .md-chip-input-container input[type="url"]:focus, .md-chips .md-chip-input-container input[type="text"]:focus {
outline: none; }
.md-chips .md-chip-input-container md-autocomplete, .md-chips .md-chip-input-container md-autocomplete-wrap {
background: transparent;
height: 32px; }
.md-chips .md-chip-input-container md-autocomplete md-autocomplete-wrap {
box-shadow: none; }
.md-chips .md-chip-input-container md-autocomplete input {
position: relative; }
.md-chips .md-chip-input-container input {
border: 0;
height: 32px;
line-height: 32px;
padding: 0; }
.md-chips .md-chip-input-container input:focus {
outline: none; }
.md-chips .md-chip-input-container md-autocomplete, .md-chips .md-chip-input-container md-autocomplete-wrap {
height: 32px; }
.md-chips .md-chip-input-container md-autocomplete {
box-shadow: none; }
.md-chips .md-chip-input-container md-autocomplete input {
position: relative; }
.md-chips .md-chip-input-container:not(:first-child) {
margin: 8px 8px 0 0; }
.md-chips .md-chip-input-container input {
background: transparent;
border-width: 0; }
.md-chips md-autocomplete button {
display: none; }
@media screen and (-ms-high-contrast: active) {
.md-chip-input-container,
md-chip {
border: 1px solid #fff; }
.md-chip-input-container md-autocomplete {
border: none; } }
md-content {
display: block;
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch; }
md-content[md-scroll-y] {
overflow-y: auto;
overflow-x: hidden; }
md-content[md-scroll-x] {
overflow-x: auto;
overflow-y: hidden; }
md-content.autoScroll {
-webkit-overflow-scrolling: auto; }
/** Styles for mdCalendar. */
md-calendar {
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.md-calendar-scroll-mask {
display: inline-block;
overflow: hidden;
height: 308px; }
.md-calendar-scroll-mask .md-virtual-repeat-scroller {
overflow-y: scroll;
-webkit-overflow-scrolling: touch; }
.md-calendar-scroll-mask .md-virtual-repeat-scroller::-webkit-scrollbar {
display: none; }
.md-calendar-scroll-mask .md-virtual-repeat-offsetter {
width: 100%; }
.md-calendar-scroll-container {
box-shadow: inset -3px 3px 6px rgba(0, 0, 0, 0.2);
display: inline-block;
height: 308px;
width: 346px; }
.md-calendar-date {
height: 44px;
width: 44px;
text-align: center;
padding: 0;
border: none; }
.md-calendar-date:first-child {
padding-left: 16px; }
.md-calendar-date:last-child {
padding-right: 16px; }
.md-calendar-date.md-calendar-date-disabled {
cursor: default; }
.md-calendar-date-selection-indicator {
transition: background-color, color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
border-radius: 50%;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px; }
.md-calendar-date:not(.md-disabled) .md-calendar-date-selection-indicator {
cursor: pointer; }
.md-calendar-month-label {
height: 44px;
font-size: 14px;
font-weight: 500;
padding: 0 0 0 24px; }
.md-calendar-day-header {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse; }
.md-calendar-day-header th {
height: 44px;
width: 44px;
text-align: center;
padding: 0;
border: none;
font-weight: normal;
height: 40px; }
.md-calendar-day-header th:first-child {
padding-left: 16px; }
.md-calendar-day-header th:last-child {
padding-right: 16px; }
.md-calendar {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse; }
.md-calendar tr:last-child td {
border-bottom-width: 1px;
border-bottom-style: solid; }
.md-calendar:first-child {
border-top: 1px solid transparent; }
/** Styles for mdDatepicker. */
md-datepicker {
white-space: nowrap;
overflow: hidden;
padding-right: 18px;
margin-right: -18px;
vertical-align: middle; }
.md-inline-form md-datepicker {
margin-top: 12px; }
.md-datepicker-button {
display: inline-block;
box-sizing: border-box;
background: none; }
.md-datepicker-input {
font-size: 14px;
box-sizing: border-box;
border: none;
box-shadow: none;
outline: none;
background: transparent;
min-width: 120px;
max-width: 328px; }
.md-datepicker-input::-ms-clear {
display: none; }
.md-datepicker-input-container {
position: relative;
padding-bottom: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
display: inline-block;
width: auto;
margin-left: 12px; }
.md-datepicker-input-container.md-datepicker-focused {
border-bottom-width: 2px; }
.md-datepicker-calendar-pane {
position: absolute;
top: 0;
left: 0;
z-index: 100;
border-width: 1px;
border-style: solid;
background: transparent;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
.md-datepicker-calendar-pane.md-pane-open {
-webkit-transform: scale(1);
transform: scale(1); }
.md-datepicker-input-mask {
height: 40px;
width: 340px;
position: relative;
background: transparent;
pointer-events: none;
cursor: text; }
.md-datepicker-input-mask-opaque {
position: absolute;
right: 0;
left: 120px;
height: 100%; }
.md-datepicker-calendar {
opacity: 0;
transition: opacity 0.2s cubic-bezier(0.5, 0, 0.25, 1); }
.md-pane-open .md-datepicker-calendar {
opacity: 1; }
.md-datepicker-calendar md-calendar:focus {
outline: none; }
.md-datepicker-expand-triangle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid; }
.md-datepicker-triangle-button {
position: absolute;
right: 0;
top: 0;
-webkit-transform: translateY(-25%) translateX(45%);
transform: translateY(-25%) translateX(45%); }
.md-datepicker-triangle-button.md-button.md-icon-button {
height: 100%;
width: 36px;
position: absolute; }
md-datepicker[disabled] .md-datepicker-input-container {
border-bottom-color: transparent; }
md-datepicker[disabled] .md-datepicker-triangle-button {
display: none; }
.md-datepicker-open .md-datepicker-input-container {
margin-left: -12px;
border: none; }
.md-datepicker-open .md-datepicker-input {
margin-left: 24px;
height: 40px; }
.md-datepicker-open .md-datepicker-triangle-button {
display: none; }
.md-datepicker-pos-adjusted .md-datepicker-input-mask {
display: none; }
.md-datepicker-calendar-pane .md-calendar {
-webkit-transform: translateY(-85px);
transform: translateY(-85px);
transition: -webkit-transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
transition-delay: 0.125s; }
.md-datepicker-calendar-pane.md-pane-open .md-calendar {
-webkit-transform: translateY(0);
transform: translateY(0); }
.md-dialog-is-showing {
max-height: 100%; }
.md-dialog-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 80;
overflow: hidden; }
md-dialog {
opacity: 0;
min-width: 240px;
max-width: 80%;
max-height: 80%;
position: relative;
overflow: auto;
box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
md-dialog.md-transition-in {
opacity: 1;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1); }
md-dialog.md-transition-out {
opacity: 0;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transform: translate(0, 100%) scale(0.2);
transform: translate(0, 100%) scale(0.2); }
md-dialog > form {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;