UNPKG

pip-webui

Version:

HTML5 UI for LOB applications

1,609 lines (1,515 loc) 711 kB
/*! * 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;