.loadingSpinner { margin: 20px auto; display: block; } section { background-color: {{g.theme.colorD}}; } section { background-color: {{g.theme.colorD}}; } .chip-container { //position: absolute; //top: 275px; right: 0; left: 0; text-align: center; margin-bottom: 60px; background-color: {{g.theme.colorD}}; } .chip-container { //position: absolute; //top: 275px; right: 0; left: 0; text-align: center; margin-bottom: 60px; background-color: {{g.theme.colorD}}; } paper-tabs::shadow #selectionBar { background-color: {{g.theme.colorB}}; } paper-tabs paper-tab::shadow #ink { color: {{g.theme.colorB}}; } #drawerPanel, [drawer] { background-color: {{g.theme.colorA}}; font-family: sans-serif; z-index: 2; } core-toolbar { background-color: {{g.theme.colorB}}; color: {{g.theme.colorA}}; font-size: 20px; font-weight: 400; } #card { display: block; margin: 64px 40px 60px 10px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); border-radius: 2px; //overflow: hidden; background-color: {{g.theme.colorD}}; } .element-label { height: 80px; line-height: 80px; padding-left: 24px; background-color: #dedede; letter-spacing: 0.05em; font-size: 24px; font-weight: 400; color: {{g.theme.colorB}}; } #frameContainer { //overflow: auto; //min-height: 300px; box-sizing: border-box; background-color: {{g.theme.colorD}}; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-weight: 400; font-size: 16px; } html, body { margin: 0px; padding: 0px; height: 100%; background-color: {{g.theme.colorA}}; color: {{g.theme.colorD}}; } html .font-special, ::shadow .font-special { //font-family: cursive; } html core-header-panel, ::shadow core-header-panel { height: 100%; } html core-header-panel[mode=cover]::shadow #mainContainer, ::shadow core-header-panel[mode=cover]::shadow #mainContainer { left: 0px; } html .core-header, ::shadow .core-header { height: 60px; font-size: 18px; padding: 0 10px; transition: height 0.2s; background-color: #424b4b; color: #fff; } html .core-header a, ::shadow .core-header a { color: #fff; } html .core-header paper-item, ::shadow .core-header paper-item { font-size: 18px; } html .core-header.tall, ::shadow .core-header.tall { height: 180px; } html .core-header.medium-tall, ::shadow .core-header.medium-tall { height: 120px; } html .core-header /deep/ core-menu-button a, ::shadow .core-header /deep/ core-menu-button a { color: #444; } html .content, ::shadow .content { background: linear-gradient(#d6e3e7, #add8e6); } html .wrapper, ::shadow .wrapper { text-align: center; } html section, ::shadow section { text-align: center; padding: 20px 0px; } html section[hero], ::shadow section[hero] { background-color: #e4e7e7; } html h1, ::shadow h1, html h2, ::shadow h2, html h3, ::shadow h3, html h4, ::shadow h4, html h5, ::shadow h5, html h6, ::shadow h6 { //font-weight: 400; //margin: 0px; //padding: 0px; } html h1, ::shadow h1, html h3, ::shadow h3, html h5, ::shadow h5 { //font-family: cursive; } html h1, ::shadow h1 { //font-size: 60px; //margin: 30px 0px; } html h2, ::shadow h2 { //color: #594f4f; //font-size: 40px; //margin: 20px 0px; } html h3, ::shadow h3 { //font-size: 25px; //margin: 15px 0px; } html h4, ::shadow h4 { //font-size: 20px; } html a, ::shadow a { color: #594f4f; text-decoration: none; } html a:hover, ::shadow a:hover { text-decoration: underline; } html .core-header /deep/ a:hover, ::shadow .core-header /deep/ a:hover { text-decoration: none; } html #ripple, ::shadow #ripple, html::shadow #ripple, ::shadow::shadow #ripple, ::shadow::shadow::shadow #ripple { color: {{g.theme.colorB}}; } html [autofocus], ::shadow [autofocus] { color: #424b4b; } html paper-button, ::shadow paper-button { margin: 2px; } html paper-button[link], ::shadow paper-button[link] { text-decoration: underline; } html paper-button[disabled], ::shadow paper-button[disabled] { color: #606565 !important; background: #c4c7c7 !important; } html paper-button[raised], ::shadow paper-button[raised] { color: #594f4f; } html paper-button #ripple, ::shadow paper-button #ripple, html paper-button::shadow #ripple, ::shadow paper-button::shadow #ripple { color: #bfb7b7; } html paper-button[primary], ::shadow paper-button[primary] { color: #424b4b; } html paper-button[primary] #ripple, ::shadow paper-button[primary] #ripple, html paper-button[primary]::shadow #ripple, ::shadow paper-button[primary]::shadow #ripple { color: #b0baba; } html paper-button[primary][raised], ::shadow paper-button[primary][raised] { background-color: #424b4b; color: #fff; } html paper-button[primary][raised] #ripple, ::shadow paper-button[primary][raised] #ripple, html paper-button[primary][raised]::shadow #ripple, ::shadow paper-button[primary][raised]::shadow #ripple { color: #384040; } html paper-button[secondary], ::shadow paper-button[secondary] { color: #3b8183; } html paper-button[secondary] #ripple, ::shadow paper-button[secondary] #ripple, html paper-button[secondary]::shadow #ripple, ::shadow paper-button[secondary]::shadow #ripple { color: #a7d6d7; } html paper-button[secondary][raised], ::shadow paper-button[secondary][raised] { background-color: #3b8183; color: #fff; } html paper-button[secondary][raised] #ripple, ::shadow paper-button[secondary][raised] #ripple, html paper-button[secondary][raised]::shadow #ripple, ::shadow paper-button[secondary][raised]::shadow #ripple { color: #326e6f; } html paper-button[success], ::shadow paper-button[success] { color: #7cb342; } html paper-button[success] #ripple, ::shadow paper-button[success] #ripple, html paper-button[success]::shadow #ripple, ::shadow paper-button[success]::shadow #ripple { color: #cbe2b2; } html paper-button[success][raised], ::shadow paper-button[success][raised] { background-color: #7cb342; color: #fff; } html paper-button[success][raised] #ripple, ::shadow paper-button[success][raised] #ripple, html paper-button[success][raised]::shadow #ripple, ::shadow paper-button[success][raised]::shadow #ripple { color: #699838; } html paper-button[info], ::shadow paper-button[info] { color: #4db6ac; } html paper-button[info] #ripple, ::shadow paper-button[info] #ripple, html paper-button[info]::shadow #ripple, ::shadow paper-button[info]::shadow #ripple { color: #b8e2de; } html paper-button[info][raised], ::shadow paper-button[info][raised] { background-color: #4db6ac; color: #fff; } html paper-button[info][raised] #ripple, ::shadow paper-button[info][raised] #ripple, html paper-button[info][raised]::shadow #ripple, ::shadow paper-button[info][raised]::shadow #ripple { color: #409c93; } html paper-button[warning], ::shadow paper-button[warning] { color: #f2d65e; } html paper-button[warning] #ripple, ::shadow paper-button[warning] #ripple, html paper-button[warning]::shadow #ripple, ::shadow paper-button[warning]::shadow #ripple { color: #faefbf; } html paper-button[warning][raised], ::shadow paper-button[warning][raised] { background-color: #f2d65e; color: #fff; } html paper-button[warning][raised] #ripple, ::shadow paper-button[warning][raised] #ripple, html paper-button[warning][raised]::shadow #ripple, ::shadow paper-button[warning][raised]::shadow #ripple { color: #eeca2f; } html paper-button[error], ::shadow paper-button[error] { color: #e26f4b; } html paper-button[error] #ripple, ::shadow paper-button[error] #ripple, html paper-button[error]::shadow #ripple, ::shadow paper-button[error]::shadow #ripple { color: #f3c5b7; } html paper-button[error][raised], ::shadow paper-button[error][raised] { background-color: #e26f4b; color: #fff; } html paper-button[error][raised] #ripple, ::shadow paper-button[error][raised] #ripple, html paper-button[error][raised]::shadow #ripple, ::shadow paper-button[error][raised]::shadow #ripple { color: #dc5024; } html paper-button[link], ::shadow paper-button[link] { color: #000; } html paper-button[link] #ripple, ::shadow paper-button[link] #ripple, html paper-button[link]::shadow #ripple, ::shadow paper-button[link]::shadow #ripple { color: #999; } html paper-button[link][raised], ::shadow paper-button[link][raised] { background-color: #fff; color: #000; } html paper-button[link][raised] #ripple, ::shadow paper-button[link][raised] #ripple, html paper-button[link][raised]::shadow #ripple, ::shadow paper-button[link][raised]::shadow #ripple { color: {{g.theme.colorB}}; } html paper-checkbox, ::shadow paper-checkbox { //padding: 20px; } html paper-checkbox::shadow #ink, ::shadow paper-checkbox::shadow #ink { //color: #594f4f; /* Change the ink color for checked state */ } html paper-checkbox::shadow #ink[checked], ::shadow paper-checkbox::shadow #ink[checked] { //color: #424b4b; } html paper-checkbox::shadow #checkbox, ::shadow paper-checkbox::shadow #checkbox { //border-color: #594f4f; /* Change the checkbox checked color */ } html paper-checkbox::shadow #checkbox.checked, ::shadow paper-checkbox::shadow #checkbox.checked { //border-color: #424b4b; } html paper-fab, ::shadow paper-fab { background-color: #424b4b; } html paper-fab::shadow core-icon, ::shadow paper-fab::shadow core-icon { color: #fff !important; } html core-toolbar paper-tabs, ::shadow core-toolbar paper-tabs { -webkit-box-shadow: none; box-shadow: none; } html paper-tabs, ::shadow paper-tabs, html core-toolbar, ::shadow core-toolbar { background-color: {{g.theme.colorB}}; color: {{g.theme.colorA}}; //-webkit-box-shadow: 0px 3px 2px rgba(0,0,0,0.2); //box-shadow: 0px 3px 2px rgba(0,0,0,0.2); } html paper-tabs.transparent-teal, ::shadow paper-tabs.transparent-teal { background-color: transparent; color: #424b4b; -webkit-box-shadow: none; box-shadow: none; } html paper-tabs.transparent-teal::shadow #selectionBar, ::shadow paper-tabs.transparent-teal::shadow #selectionBar { background-color: {{g.theme.colorA}}; } html paper-tabs.transparent-teal paper-tab::shadow #ink, ::shadow paper-tabs.transparent-teal paper-tab::shadow #ink { color: {{g.theme.colorA}}; } html paper-tabs[noink][nobar] paper-tab.core-selected, ::shadow paper-tabs[noink][nobar] paper-tab.core-selected { color: #c5cae9; } html paper-tabs::shadow *, ::shadow paper-tabs::shadow * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; } html paper-tabs::shadow #selectionBar, ::shadow paper-tabs::shadow #selectionBar { background-color: {{g.theme.colorA}}; } html paper-tab::shadow #ink, ::shadow paper-tab::shadow #ink { color: {{g.theme.colorA}}; } html paper-toast, ::shadow paper-toast { background: #323232; color: #f1f1f1; text-align: left; } html paper-toast .highlight, ::shadow paper-toast .highlight { color: #4db6ac; } html paper-toast::shadow *, ::shadow paper-toast::shadow * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; } html paper-input[focused] .floated-label, ::shadow paper-input[focused] .floated-label { color: {{g.theme.colorA}}; } html paper-input[focused] .error-text, ::shadow paper-input[focused] .error-text, html paper-input[focused] .error-icon, ::shadow paper-input[focused] .error-icon { color: #e26f4b; } html paper-input .focused-underline, ::shadow paper-input .focused-underline { background-color: {{g.theme.colorB}}; } html paper-input.invalid .focused-underline, ::shadow paper-input.invalid .focused-underline { background-color: #e26f4b; } html paper-input.invalid[focused] .floated-label, ::shadow paper-input.invalid[focused] .floated-label { color: #e26f4b; } html paper-input[disabled], ::shadow paper-input[disabled] { color: #c4c7c7; } html paper-input-decorator /deep/ .label-text, ::shadow paper-input-decorator /deep/ .label-text, html paper-input-decorator /deep/ .error, ::shadow paper-input-decorator /deep/ .error { /* inline label, floating label, error message and error icon color when the input is unfocused */ color: {{g.theme.colorA}}; } html paper-input-decorator /deep/ .unfocused-underline, ::shadow paper-input-decorator /deep/ .unfocused-underline { /* line color when the input is unfocused */ background-color: {{g.theme.colorB}}; } html paper-input-decorator /deep/ .focused-underline, ::shadow paper-input-decorator /deep/ .focused-underline { /* line color when the input is focused */ background-color: {{g.theme.colorA}}; } html paper-input-decorator /deep/ .cursor, ::shadow paper-input-decorator /deep/ .cursor { /* cursor color during the focus transition */ background-color: #424b4b; } html paper-input-decorator /deep/ ::-webkit-input-placeholder, ::shadow paper-input-decorator /deep/ ::-webkit-input-placeholder { /* platform specific rules for placeholder text */ color: {{g.theme.colorD}}; } html paper-input-decorator /deep/ ::-moz-placeholder, ::shadow paper-input-decorator /deep/ ::-moz-placeholder { color: {{g.theme.colorD}}; } html paper-input-decorator /deep/ :-ms-input-placeholder, ::shadow paper-input-decorator /deep/ :-ms-input-placeholder { color: {{g.theme.colorD}}; } html paper-input-decorator[focused] .floated-label .label-text, ::shadow paper-input-decorator[focused] .floated-label .label-text, html paper-input-decorator[focused] /deep/ .floated-label .label-text, ::shadow paper-input-decorator[focused] /deep/ .floated-label .label-text { /* floating label color when the input is focused */ color: #424b4b; } html paper-input-decorator.invalid[focused] /deep/ .floated-label .label-text, ::shadow paper-input-decorator.invalid[focused] /deep/ .floated-label .label-text, html paper-input-decorator[focused] /deep/ .error, ::shadow paper-input-decorator[focused] /deep/ .error { /* floating label, error message nad error icon color when the input is invalid and focused */ color: #e26f4b; } html paper-input-decorator.invalid /deep/ .floated-label .label-text, ::shadow paper-input-decorator.invalid /deep/ .floated-label .label-text, html paper-input-decorator /deep/ .error, ::shadow paper-input-decorator /deep/ .error { /* floating label, error message nad error icon color when the input is invalid and not focused */ color: #e26f4b; } html paper-input-decorator.invalid /deep/ .focused-underline, ::shadow paper-input-decorator.invalid /deep/ .focused-underline, html paper-input-decorator.invalid /deep/ .cursor, ::shadow paper-input-decorator.invalid /deep/ .cursor { /* line and cursor color when the input is invalid and focused */ background-color: #e26f4b; } html .toolbar, ::shadow .toolbar { color: #fff; background: #424b4b; } html .card, ::shadow .card { background: #ececec; } html paper-item, ::shadow paper-item, html paper-shadow, ::shadow paper-shadow { //background-color: #535e5e; color: {{g.theme.colorA}}; } html paper-item:hover, ::shadow paper-item:hover { //background-color: #424b4b; } html paper-item.core-selected, ::shadow paper-item.core-selected { background-color: #728181; } html paper-dropdown::shadow #background, ::shadow paper-dropdown::shadow #background { //background-color: #535e5e; } html .small, ::shadow .small { font-size: 12px; } html .logo, ::shadow .logo { font-size: 21px; } html .logo a, ::shadow .logo a { font-weight: 700; color: #fff; } html .inverse, ::shadow .inverse { background-color: #7ec0ee; color: #fff; } html paper-progress::shadow #activeProgress, ::shadow paper-progress::shadow #activeProgress { //background-color: #424b4b; } html paper-progress::shadow #secondaryProgress, ::shadow paper-progress::shadow #secondaryProgress { //background-color: #3b8183; } html paper-radio-button::shadow #ink, ::shadow paper-radio-button::shadow #ink { color: {{g.theme.colorA}}; } html paper-radio-button::shadow #ink[checked], ::shadow paper-radio-button::shadow #ink[checked] { color: {{g.theme.colorA}}; } html paper-radio-button::shadow #onRadio, ::shadow paper-radio-button::shadow #onRadio { background-color: #424b4b; } html paper-radio-button::shadow #offRadio, ::shadow paper-radio-button::shadow #offRadio { background-color: #fff; } html paper-toggle-button::shadow paper-radio-button::shadow #ink, ::shadow paper-toggle-button::shadow paper-radio-button::shadow #ink { color: {{g.theme.colorA}}; } html paper-toggle-button::shadow paper-radio-button::shadow #ink[checked], ::shadow paper-toggle-button::shadow paper-radio-button::shadow #ink[checked] { color: {{g.theme.colorA}}; } html paper-toggle-button::shadow paper-radio-button::shadow #onRadio, ::shadow paper-toggle-button::shadow paper-radio-button::shadow #onRadio { background-color: #424b4b; } html paper-toggle-button::shadow paper-radio-button::shadow #offRadio, ::shadow paper-toggle-button::shadow paper-radio-button::shadow #offRadio { background-color: #fff; } html paper-toggle-button::shadow #toggleBar, ::shadow paper-toggle-button::shadow #toggleBar { background-color: #594f4f; } html paper-toggle-button::shadow #toggleBar[checked], ::shadow paper-toggle-button::shadow #toggleBar[checked] { background-color: #424b4b; } html paper-slider::shadow #sliderBar::shadow #activeProgress, ::shadow paper-slider::shadow #sliderBar::shadow #activeProgress { background-color: #424b4b; } html paper-slider::shadow #sliderBar::shadow #secondaryProgress, ::shadow paper-slider::shadow #sliderBar::shadow #secondaryProgress { background-color: #3b8183; } html paper-slider::shadow #sliderKnobInner, ::shadow paper-slider::shadow #sliderKnobInner { background-color: #424b4b; } html paper-slider::shadow #sliderKnobInner::before, ::shadow paper-slider::shadow #sliderKnobInner::before { background-color: #424b4b; } html paper-icon-button[disabled]::shadow core-icon, ::shadow paper-icon-button[disabled]::shadow core-icon { color: #c4c7c7 !important; } html paper-spinner:not([default-spinner])::shadow .circle, ::shadow paper-spinner:not([default-spinner])::shadow .circle { border-color: #424b4b; }