UNPKG

equation-admin-template

Version:

Booststrap 4 admin template made by equation

2,181 lines (2,179 loc) 127 kB
.debug { border: 1px dashed #00d1c1; } .opacity { opacity: .9; } .half-opacity { opacity: .5; } .hi-opacity { opacity: .2; } .element-selected { border: 4px #4390df solid; } .element-selected:after { position: absolute; display: block; border-top: 40px solid #24ccda; border-left: 40px solid transparent; right: 0; content: ""; top: 0; z-index: 101; } .element-selected:before { position: absolute; font-family: 'flaticon' !important; content: "\e9c1"; right: 5px; top: 2px; z-index: 102; color: #fff; } .set-border { border: 1px #d9d9d9 solid; } .set-border.medium-border { border-width: 8px; } .set-border.large-border { border-width: 16px; } .fix-slow-animation { -webkit-transform: translateZ(0); transform: translateZ(0); } [data-role="dropdown"]:not(.open), [data-role="dropdown"]:not(.keep-open) { display: none; position: absolute; z-index: 1000; } .button { padding: 0 1rem; height: 2.125rem; text-align: center; vertical-align: middle; background-color: #ffffff; border: 1px #d9d9d9 solid; color: #262626; cursor: pointer; display: inline-block; outline: none; margin: .15625rem; position: relative; } .button.default { background-color: #008287; color: #fff; } .button:hover { border-color: #787878; } .button:active { background: #eeeeee; color: #262626; box-shadow: none; } .button:focus { outline: 0; } .button:disabled, .button.disabled { background-color: #eaeaea; color: #bebebe; cursor: default; border-color: transparent; } .button * { color: inherit; } .button *:hover { color: inherit; } .button.rounded { border-radius: .325rem; } .button > [class*=mif-] { vertical-align: middle; } .button.button-shadow { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); } .button img { height: .875rem; vertical-align: middle; margin: 0; } .round-button, .cycle-button, .square-button { padding: 0 1rem; height: 2.125rem; background-color: #ffffff; border: 1px #d9d9d9 solid; color: #262626; cursor: pointer; display: inline-block; outline: none; margin: .15625rem 0; position: relative; width: 2.125rem; min-width: 2.125rem; padding: 0 ; border-radius: 50%; text-align: center; text-decoration: none; vertical-align: middle; line-height: 1; } .round-button.default, .cycle-button.default, .square-button.default { background-color: #008287; color: #fff; } .round-button:hover, .cycle-button:hover, .square-button:hover { border-color: #787878; } .round-button:active, .cycle-button:active, .square-button:active { background: #eeeeee; color: #262626; box-shadow: none; } .round-button:focus, .cycle-button:focus, .square-button:focus { outline: 0; } .round-button:disabled, .cycle-button:disabled, .square-button:disabled, .round-button.disabled, .cycle-button.disabled, .square-button.disabled { background-color: #eaeaea; color: #bebebe; cursor: default; border-color: transparent; } .round-button *, .cycle-button *, .square-button * { color: inherit; } .round-button *:hover, .cycle-button *:hover, .square-button *:hover { color: inherit; } .round-button.rounded, .cycle-button.rounded, .square-button.rounded { border-radius: .325rem; } .round-button > [class*=mif-], .cycle-button > [class*=mif-], .square-button > [class*=mif-] { vertical-align: middle; } .round-button img, .cycle-button img, .square-button img { height: .875rem; vertical-align: middle; margin: 0; } .round-button.loading-pulse, .cycle-button.loading-pulse, .square-button.loading-pulse { position: relative; padding: 0 1.325rem; } .round-button.loading-pulse:before, .cycle-button.loading-pulse:before, .square-button.loading-pulse:before { position: absolute; content: ""; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; background-color: #333; border-radius: 100%; -webkit-animation: scaleout 1s infinite ease-in-out; -moz-animation: scaleout 1s infinite ease-in-out; -ms-animation: scaleout 1s infinite ease-in-out; -o-animation: scaleout 1s infinite ease-in-out; animation: scaleout 1s infinite ease-in-out; } .round-button.loading-pulse.lighten:before, .cycle-button.loading-pulse.lighten:before, .square-button.loading-pulse.lighten:before { background-color: #fff; } .round-button.loading-cube, .cycle-button.loading-cube, .square-button.loading-cube { position: relative; padding: 0 1.325rem; } .round-button.loading-cube:before, .cycle-button.loading-cube:before, .square-button.loading-cube:before, .round-button.loading-cube:after, .cycle-button.loading-cube:after, .square-button.loading-cube:after { content: ""; background-color: #333; width: 5px; height: 5px; position: absolute; top: 50%; left: 3px; margin-top: -8px; -webkit-animation: cubemove 1.8s infinite ease-in-out; -moz-animation: cubemove 1.8s infinite ease-in-out; -ms-animation: cubemove 1.8s infinite ease-in-out; -o-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .round-button.loading-cube:after, .cycle-button.loading-cube:after, .square-button.loading-cube:after { -webkit-animation-delay: -0.9s; -moz-animation-delay: -0.9s; -ms-animation-delay: -0.9s; -o-animation-delay: -0.9s; animation-delay: -0.9s; } .round-button.loading-cube.lighten:before, .cycle-button.loading-cube.lighten:before, .square-button.loading-cube.lighten:before, .round-button.loading-cube.lighten:after, .cycle-button.loading-cube.lighten:after, .square-button.loading-cube.lighten:after { background-color: #fff; } .round-button.dropdown-toggle, .cycle-button.dropdown-toggle, .square-button.dropdown-toggle { padding-right: 1.625rem; } .round-button.dropdown-toggle.drop-marker-light:before, .cycle-button.dropdown-toggle.drop-marker-light:before, .square-button.dropdown-toggle.drop-marker-light:before, .round-button.dropdown-toggle.drop-marker-light:after, .cycle-button.dropdown-toggle.drop-marker-light:after, .square-button.dropdown-toggle.drop-marker-light:after { background-color: #ffffff; } .round-button.primary, .cycle-button.primary, .square-button.primary { background: #2086bf; color: #ffffff; border-color: #2086bf; } .round-button.primary:active, .cycle-button.primary:active, .square-button.primary:active { background: #1b6eae; color: #ffffff; } .round-button.success, .cycle-button.success, .square-button.success { background: #60a917; color: #ffffff; border-color: #60a917; } .round-button.success:active, .cycle-button.success:active, .square-button.success:active { background: #128023; color: #ffffff; } .round-button.danger, .cycle-button.danger, .square-button.danger, .round-button.alert, .cycle-button.alert, .square-button.alert { background: #ce352c; color: #ffffff; border-color: #ce352c; } .round-button.danger:active, .cycle-button.danger:active, .square-button.danger:active, .round-button.alert:active, .cycle-button.alert:active, .square-button.alert:active { background: #9a1616; color: #ffffff; } .round-button.info, .cycle-button.info, .square-button.info { background: #59cde2; color: #ffffff; border-color: #59cde2; } .round-button.info:active, .cycle-button.info:active, .square-button.info:active { background: #1ba1e2; color: #ffffff; } .round-button.warning, .cycle-button.warning, .square-button.warning { background: #fa6800; color: #ffffff; border-color: #fa6800; } .round-button.warning:active, .cycle-button.warning:active, .square-button.warning:active { background: #bf5a15; color: #ffffff; } .round-button.link, .cycle-button.link, .square-button.link { background: transparent; color: #2086bf; border-color: transparent; text-decoration: underline; } .round-button.link:hover, .cycle-button.link:hover, .square-button.link:hover, .round-button.link:active, .cycle-button.link:active, .square-button.link:active { background: transparent; color: #114968; border-color: transparent; } .square-button { border-radius: 0; } a.button, a.round-button, a.square-button { color: inherit; } a.button:hover, a.round-button:hover, a.square-button:hover { text-decoration: none; } .button.loading-pulse { position: relative; padding: 0 1.325rem; } .command-button { padding: 0 1rem; height: 2.125rem; text-align: center; vertical-align: middle; background-color: #ffffff; border: 1px #d9d9d9 solid; color: #262626; cursor: pointer; display: inline-block; outline: none; font-size: .875rem; margin: .15625rem 0; position: relative; height: auto; text-align: left; font-size: 1.325rem; padding-left: 4rem; padding-top: 8px; padding-bottom: 4px; } .command-button.default { background-color: #008287; color: #fff; } .command-button:hover { border-color: #787878; } .command-button:active { background: #eeeeee; color: #262626; box-shadow: none; } .command-button:focus { outline: 0; } .command-button:disabled, .command-button.disabled { background-color: #eaeaea; color: #bebebe; cursor: default; border-color: transparent; } .command-button * { color: inherit; } .command-button *:hover { color: inherit; } .command-button.rounded { border-radius: .325rem; } .command-button > [class*=mif-] { vertical-align: middle; } .command-button img { height: .875rem; vertical-align: middle; margin: 0; } .command-button.loading-pulse { position: relative; padding: 0 1.325rem; } .command-button.loading-pulse:before { position: absolute; content: ""; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; background-color: #333; border-radius: 100%; -webkit-animation: scaleout 1s infinite ease-in-out; animation: scaleout 1s infinite ease-in-out; } .command-button.loading-pulse.lighten:before { background-color: #fff; } .command-button.loading-cube { position: relative; padding: 0 1.325rem; } .command-button.loading-cube:before, .command-button.loading-cube:after { content: ""; background-color: #333; width: 5px; height: 5px; position: absolute; top: 50%; left: 3px; margin-top: -8px; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .command-button.loading-cube:after { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .command-button.loading-cube.lighten:before, .command-button.loading-cube.lighten:after { background-color: #fff; } .command-button.dropdown-toggle { padding-right: 1.625rem; } .command-button.dropdown-toggle.drop-marker-light:before, .command-button.dropdown-toggle.drop-marker-light:after { background-color: #ffffff; } .command-button.primary { background: #2086bf; color: #ffffff; border-color: #2086bf; } .command-button.primary:active { background: #1b6eae; color: #ffffff; } .command-button.success { background: #60a917; color: #ffffff; border-color: #60a917; } .command-button.success:active { background: #128023; color: #ffffff; } .command-button.danger, .command-button.alert { background: #ce352c; color: #ffffff; border-color: #ce352c; } .command-button.danger:active, .command-button.alert:active { background: #9a1616; color: #ffffff; } .command-button.info { background: #59cde2; color: #ffffff; border-color: #59cde2; } .command-button.info:active { background: #1ba1e2; color: #ffffff; } .command-button.warning { background: #fa6800; color: #ffffff; border-color: #fa6800; } .command-button.warning:active { background: #bf5a15; color: #ffffff; } .command-button.link { background: transparent; color: #2086bf; border-color: transparent; text-decoration: underline; } .command-button.link:hover, .command-button.link:active { background: transparent; color: #114968; border-color: transparent; } .command-button small { display: block; font-size: .8rem; line-height: 1.625rem; margin-top: -0.3125rem; } .command-button .icon { left: 1rem; top: 50%; margin-top: -1rem; position: absolute; font-size: 2rem; height: 2rem; width: 2rem; margin-right: .625rem; } .command-button.icon-right { padding-left: 1rem; padding-right: 4rem; } .command-button.icon-right .icon { left: auto; right: 0; } .group-of-buttons .button.active, .group-of-buttons .toolbar-button.active { background-color: #00ccff; color: #ffffff; } .group-of-buttons .button:active, .group-of-buttons .toolbar-button:active { background-color: #1ba1e2; color: #ffffff; } .split-button, .dropdown-button { display: inline-block; position: relative; vertical-align: middle; } .split-button:before, .dropdown-button:before, .split-button:after, .dropdown-button:after { display: table; content: ""; } .split-button:after, .dropdown-button:after { clear: both; } .split-button .button, .dropdown-button .button, .split-button .split, .dropdown-button .split { display: block; float: left; } .split-button .split, .dropdown-button .split { padding: 0 1rem 0 .625rem; height: 2.125rem; text-align: center; vertical-align: middle ; background-color: #ffffff; border: 1px #d9d9d9 solid; color: #262626; cursor: pointer; outline: none; position: relative; margin: .15625rem 0; } .split-button .split:hover, .dropdown-button .split:hover { background-color: #eeeeee; border-color: #787878; } .split-button .split.dropdown-toggle:before, .dropdown-button .split.dropdown-toggle:before { transition: all 0.3s ease; } .split-button .split.dropdown-toggle.active-toggle:before, .dropdown-button .split.dropdown-toggle.active-toggle:before { -webkit-transform: rotate(135deg); transform: rotate(135deg); transition: all 0.3s ease; } .split-button .split-content, .dropdown-button .split-content { position: absolute; top: 100%; } .split.primary { background: #2086bf; color: #ffffff; border-color: #2086bf; } .split.primary:active { background: #1b6eae; } .split.primary:hover { background: #59cde2; border-color: #59cde2; } .split.primary.dropdown-toggle:before { border-color: #ffffff; } .split.success { background: #60a917; color: #ffffff; border-color: #60a917; } .split.success:active { background: #128023; } .split.success:hover { background: #7ad61d; border-color: #7ad61d; } .split.success.dropdown-toggle:before { border-color: #ffffff; } .split.danger { background: #ce352c; color: #ffffff; border-color: #ce352c; } .split.danger:active { background: #9a1616; } .split.danger:hover { background: #da5a53; border-color: #da5a53; } .split.danger.dropdown-toggle:before { border-color: #ffffff; } .split.info { background: #59cde2; color: #ffffff; border-color: #59cde2; } .split.info:active { background: #1ba1e2; } .split.info:hover { background: #4390df; border-color: #4390df; } .split.info.dropdown-toggle:before { border-color: #ffffff; } .split.warning { background: #fa6800; color: #ffffff; border-color: #fa6800; } .split.warning:active { background: #bf5a15; } .split.warning:hover { background: #ffc194; border-color: #ffc194; } .split.warning.dropdown-toggle:before { border-color: #ffffff; } .mini-button, .small-button, .large-button, .big-button { line-height: 100%; } .mini-button { font-size: .6rem; padding: .2rem .625rem; height: 1.4rem; line-height: 1.4rem; } .small-button { font-size: .7rem; padding: 0 .625rem; height: 1.7rem; line-height: 1.7rem; } .large-button { height: 2.55rem; font-size: 1.05rem; line-height: 2.55rem; } .big-button { line-height: 3.125rem; height: 3.125rem; font-size: 1.2rem; } .round-button.mini-button, .cycle-button.mini-button, .square-button.mini-button { width: 1.4rem; height: 1.4rem; font-size: .6rem; padding: 0; min-width: 0; } .round-button.small-button, .cycle-button.small-button, .square-button.small-button { width: 1.7rem; height: 1.7rem; font-size: .7rem; padding: 0; min-width: 0; } .round-button.large-button, .cycle-button.large-button, .square-button.large-button { font-size: 1.05rem; line-height: 1; width: 2.55rem; height: 2.55rem; } .round-button.big-button, .cycle-button.big-button, .square-button.big-button { font-size: 1.2rem; width: 3.125rem; height: 3.125rem; } .button.primary { background: #4073FF; color: #ffffff; border-color: #4073FF; } .button.primary:active { background: #4073FF; color: #ffffff; } .button.success { background: #1ad271; color: #ffffff; border-color: #1ad271; } .button.success:active { background: #1ad271; color: #ffffff; } .button.danger, .button.alert { background: #ec2330; color: #ffffff; border-color: #ec2330; } .button.danger:active, .button.alert:active { background: #ec2330; color: #ffffff; } .button.info { background: #26b0ff; color: #ffffff; border-color: #26b0ff; } .button.info:active { background: #26b0ff; color: #ffffff; } .button.warning { background: #ffbb44; color: #ffffff; border-color: #ffbb44; } .button.warning:active { background: #f28b21; color: #ffffff; } .button.link { background: transparent; color: #2086bf; border-color: transparent; text-decoration: underline; } .button.link:hover, .button.link:active { background: transparent; color: #114968; border-color: transparent; } a.button, span.button, div.button, a.round-button, span.round-button, div.round-button, a.cycle-button, span.cycle-button, div.cycle-button, a.square-button, span.square-button, div.square-button { padding-top: .53125rem; } a.button.big-button, span.button.big-button, div.button.big-button, a.round-button.big-button, span.round-button.big-button, div.round-button.big-button, a.cycle-button.big-button, span.cycle-button.big-button, div.cycle-button.big-button, a.square-button.big-button, span.square-button.big-button, div.square-button.big-button { padding-top: .78125rem; } .dropdown-button button.dropdown-toggle:before { transition: all 0.3s ease; } .dropdown-button button.dropdown-toggle.active-toggle:before { -webkit-transform: rotate(135deg); transform: rotate(135deg); transition: all 0.3s ease; } .shortcut-button[data-hotkey]::after { position: absolute; content: attr(data-hotkey); font-size: .625rem; bottom: 0; right: 0; color: #999999; } .shortcut-button[data-hotkey].no-hotkey-display::after { display: none; } .toolbar { position: relative; } .toolbar:before, .toolbar:after { display: table; content: ""; } .toolbar:after { clear: both; } .toolbar-section { position: relative; padding-left: .5725rem; margin: .125rem; float: left; width: auto; } .toolbar-section.no-divider:before { display: none; } .toolbar-section:before { position: absolute; content: ""; width: .325rem; height: 100%; left: 0; background-color: #eeeeee; cursor: move; } .toolbar .toolbar-button { padding: 0 1rem; height: 2.125rem; background-color: #ffffff; border: 1px #d9d9d9 solid; color: #262626; cursor: pointer; display: inline-block; outline: none; margin: .15625rem 0; position: relative; width: 2.125rem; min-width: 2.125rem; padding: 0 ; border-radius: 50%; text-align: center; text-decoration: none; vertical-align: middle; line-height: 1; border-radius: 0; line-height: 2.125rem; margin: 0; } .toolbar .toolbar-button.default { background-color: #008287; color: #fff; } .toolbar .toolbar-button:hover { border-color: #787878; } .toolbar .toolbar-button:active { background: #eeeeee; color: #262626; box-shadow: none; } .toolbar .toolbar-button:focus { outline: 0; } .toolbar .toolbar-button:disabled, .toolbar .toolbar-button.disabled { background-color: #eaeaea; color: #bebebe; cursor: default; border-color: transparent; } .toolbar .toolbar-button * { color: inherit; } .toolbar .toolbar-button *:hover { color: inherit; } .toolbar .toolbar-button.rounded { border-radius: .325rem; } .toolbar .toolbar-button > [class*=mif-] { vertical-align: middle; } .toolbar .toolbar-button img { height: .875rem; vertical-align: middle; margin: 0; } .toolbar .toolbar-button.loading-pulse { position: relative; padding: 0 1.325rem; } .toolbar .toolbar-button.loading-pulse:before { position: absolute; content: ""; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; background-color: #333; border-radius: 100%; -webkit-animation: scaleout 1s infinite ease-in-out; animation: scaleout 1s infinite ease-in-out; } .toolbar .toolbar-button.loading-pulse.lighten:before { background-color: #fff; } .toolbar .toolbar-button.loading-cube { position: relative; padding: 0 1.325rem; } .toolbar .toolbar-button.loading-cube:before, .toolbar .toolbar-button.loading-cube:after { content: ""; background-color: #333; width: 5px; height: 5px; position: absolute; top: 50%; left: 3px; margin-top: -8px; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .toolbar .toolbar-button.loading-cube:after { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .toolbar .toolbar-button.loading-cube.lighten:before, .toolbar .toolbar-button.loading-cube.lighten:after { background-color: #fff; } .toolbar .toolbar-button.dropdown-toggle { padding-right: 1.625rem; } .toolbar .toolbar-button.dropdown-toggle.drop-marker-light:before, .toolbar .toolbar-button.dropdown-toggle.drop-marker-light:after { background-color: #ffffff; } .toolbar .toolbar-button.primary { background: #2086bf; color: #ffffff; border-color: #2086bf; } .toolbar .toolbar-button.primary:active { background: #1b6eae; color: #ffffff; } .toolbar .toolbar-button.success { background: #60a917; color: #ffffff; border-color: #60a917; } .toolbar .toolbar-button.success:active { background: #128023; color: #ffffff; } .toolbar .toolbar-button.danger, .toolbar .toolbar-button.alert { background: #ce352c; color: #ffffff; border-color: #ce352c; } .toolbar .toolbar-button.danger:active, .toolbar .toolbar-button.alert:active { background: #9a1616; color: #ffffff; } .toolbar .toolbar-button.info { background: #59cde2; color: #ffffff; border-color: #59cde2; } .toolbar .toolbar-button.info:active { background: #1ba1e2; color: #ffffff; } .toolbar .toolbar-button.warning { background: #fa6800; color: #ffffff; border-color: #fa6800; } .toolbar .toolbar-button.warning:active { background: #bf5a15; color: #ffffff; } .toolbar .toolbar-button.link { background: transparent; color: #2086bf; border-color: transparent; text-decoration: underline; } .toolbar .toolbar-button.link:hover, .toolbar .toolbar-button.link:active { background: transparent; color: #114968; border-color: transparent; } .toolbar .toolbar-button.mini-button { width: 1.4rem; height: 1.4rem; font-size: .6rem; padding: 0; min-width: 0; } .toolbar .toolbar-button.small-button { width: 1.7rem; height: 1.7rem; font-size: .7rem; padding: 0; min-width: 0; } .toolbar .toolbar-button.large-button { font-size: 1.05rem; line-height: 1; width: 2.55rem; height: 2.55rem; } .toolbar .toolbar-button.big-button { font-size: 1.2rem; width: 3.125rem; height: 3.125rem; } .toolbar-group, .toolbar-section { display: inline-block; } .toolbar-group.condensed:before, .toolbar-section.condensed:before, .toolbar-group.condensed:after, .toolbar-section.condensed:after { display: table; content: ""; } .toolbar-group.condensed:after, .toolbar-section.condensed:after { clear: both; } .toolbar-group.condensed .button, .toolbar-section.condensed .button, .toolbar-group.condensed .toolbar-button, .toolbar-section.condensed .toolbar-button { display: block; float: left; } .toolbar-group-check .toolbar-button.checked { background-color: #59cde2; color: #ffffff; border-color: #59cde2; } .toolbar-group-radio .toolbar-button.checked { background-color: #59cde2; color: #ffffff; border-color: #59cde2; } .toolbar.rounded > .toolbar-button, .toolbar.rounded > .toolbar-section .toolbar-button { border-radius: .3125rem; } .toolbar.rounded .toolbar-section:before { border-radius: .3125rem; } .v-toolbar { position: relative; float: left; } .v-toolbar:before, .v-toolbar:after { display: table; content: ""; } .v-toolbar:after { clear: both; } .v-toolbar .toolbar-button { padding: 0 1rem; height: 2.125rem; background-color: #ffffff; border: 1px #d9d9d9 solid; color: #262626; cursor: pointer; display: inline-block; outline: none; font-size: .875rem; margin: .15625rem 0; position: relative; width: 2.125rem; min-width: 2.125rem; padding: 0 ; border-radius: 50%; text-align: center; text-decoration: none; vertical-align: middle; line-height: 1; border-radius: 0; line-height: 2.125rem; margin: 0; } .v-toolbar .toolbar-button.default { background-color: #008287; color: #fff; } .v-toolbar .toolbar-button:hover { border-color: #787878; } .v-toolbar .toolbar-button:active { background: #eeeeee; color: #262626; box-shadow: none; } .v-toolbar .toolbar-button:focus { outline: 0; } .v-toolbar .toolbar-button:disabled, .v-toolbar .toolbar-button.disabled { background-color: #eaeaea; color: #bebebe; cursor: default; border-color: transparent; } .v-toolbar .toolbar-button * { color: inherit; } .v-toolbar .toolbar-button *:hover { color: inherit; } .v-toolbar .toolbar-button.rounded { border-radius: .325rem; } .v-toolbar .toolbar-button > [class*=mif-] { vertical-align: middle; } .v-toolbar .toolbar-button img { height: .875rem; vertical-align: middle; margin: 0; } .v-toolbar .toolbar-button.loading-pulse { position: relative; padding: 0 1.325rem; } .v-toolbar .toolbar-button.loading-pulse:before { position: absolute; content: ""; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; background-color: #333; border-radius: 100%; -webkit-animation: scaleout 1s infinite ease-in-out; animation: scaleout 1s infinite ease-in-out; } .v-toolbar .toolbar-button.loading-pulse.lighten:before { background-color: #fff; } .v-toolbar .toolbar-button.loading-cube { position: relative; padding: 0 1.325rem; } .v-toolbar .toolbar-button.loading-cube:before, .v-toolbar .toolbar-button.loading-cube:after { content: ""; background-color: #333; width: 5px; height: 5px; position: absolute; top: 50%; left: 3px; margin-top: -8px; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .v-toolbar .toolbar-button.loading-cube:after { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .v-toolbar .toolbar-button.loading-cube.lighten:before, .v-toolbar .toolbar-button.loading-cube.lighten:after { background-color: #fff; } .v-toolbar .toolbar-button.dropdown-toggle { padding-right: 1.625rem; } .v-toolbar .toolbar-button.dropdown-toggle.drop-marker-light:before, .v-toolbar .toolbar-button.dropdown-toggle.drop-marker-light:after { background-color: #ffffff; } .v-toolbar .toolbar-button.primary { background: #2086bf; color: #ffffff; border-color: #2086bf; } .v-toolbar .toolbar-button.primary:active { background: #1b6eae; color: #ffffff; } .v-toolbar .toolbar-button.success { background: #60a917; color: #ffffff; border-color: #60a917; } .v-toolbar .toolbar-button.success:active { background: #128023; color: #ffffff; } .v-toolbar .toolbar-button.danger, .v-toolbar .toolbar-button.alert { background: #ce352c; color: #ffffff; border-color: #ce352c; } .v-toolbar .toolbar-button.danger:active, .v-toolbar .toolbar-button.alert:active { background: #9a1616; color: #ffffff; } .v-toolbar .toolbar-button.info { background: #59cde2; color: #ffffff; border-color: #59cde2; } .v-toolbar .toolbar-button.info:active { background: #1ba1e2; color: #ffffff; } .v-toolbar .toolbar-button.warning { background: #fa6800; color: #ffffff; border-color: #fa6800; } .v-toolbar .toolbar-button.warning:active { background: #bf5a15; color: #ffffff; } .v-toolbar .toolbar-button.link { background: transparent; color: #2086bf; border-color: transparent; text-decoration: underline; } .v-toolbar .toolbar-button.link:hover, .v-toolbar .toolbar-button.link:active { background: transparent; color: #114968; border-color: transparent; } .v-toolbar .toolbar-button.mini-button { width: 1.4rem; height: 1.4rem; font-size: .6rem; padding: 0; min-width: 0; } .v-toolbar .toolbar-button.small-button { width: 1.7rem; height: 1.7rem; font-size: .7rem; padding: 0; min-width: 0; } .v-toolbar .toolbar-button.large-button { font-size: 1.05rem; line-height: 1; width: 2.55rem; height: 2.55rem; } .v-toolbar .toolbar-button.big-button { font-size: 1.2rem; width: 3.125rem; height: 3.125rem; } .v-toolbar.rounded > .toolbar-button, .v-toolbar.rounded > .toolbar-section .toolbar-button { border-radius: .3125rem; } .v-toolbar.rounded .toolbar-section:before { border-radius: .3125rem; } .v-toolbar .toolbar-section { padding-left: 0; padding-top: .5725rem; } .v-toolbar .toolbar-section:before { width: 100%; top: 0; height: .325rem; } .v-toolbar .toolbar-button { display: block; margin-bottom: .25rem; } .v-toolbar.no-divider .toolbar-section:before { display: none; } .input-control { display: inline-block; min-height: 2.125rem; height: 2.125rem; position: relative; vertical-align: middle; margin: .325rem 0; line-height: 1; } .input-control[data-role=select] { height: auto; } .input-control.text .button, .input-control.select .button, .input-control.file .button, .input-control.password .button, .input-control.number .button, .input-control.email .button, .input-control.tel .button { position: absolute; top: 0; right: 0; z-index: 2; margin: 0; } .input-control.text > label, .input-control.select > label, .input-control.file > label, .input-control.password > label, .input-control.number > label, .input-control.email > label, .input-control.tel > label, .input-control.text > .label, .input-control.select > .label, .input-control.file > .label, .input-control.password > .label, .input-control.number > .label, .input-control.email > .label, .input-control.tel > .label { position: absolute; left: 0; top: -1rem; } .input-control.text > input:disabled + .button, .input-control.select > input:disabled + .button, .input-control.file > input:disabled + .button, .input-control.password > input:disabled + .button, .input-control.number > input:disabled + .button, .input-control.email > input:disabled + .button, .input-control.tel > input:disabled + .button { display: none; } .input-control.text .prepend-icon, .input-control.select .prepend-icon, .input-control.file .prepend-icon, .input-control.password .prepend-icon, .input-control.number .prepend-icon, .input-control.email .prepend-icon, .input-control.tel .prepend-icon { width: 24px; height: 24px; font-size: 24px; line-height: 1; position: absolute; top: 50%; margin-top: -12px; left: 4px; z-index: 2; color: #999999; } .input-control.text .prepend-icon ~ input, .input-control.select .prepend-icon ~ input, .input-control.file .prepend-icon ~ input, .input-control.password .prepend-icon ~ input, .input-control.number .prepend-icon ~ input, .input-control.email .prepend-icon ~ input, .input-control.tel .prepend-icon ~ input { padding-left: 30px; } .input-control input, .input-control textarea, .input-control select { -moz-appearance: none; -webkit-appearance: none; appearance: none; position: relative; border: 1px #d9d9d9 solid; width: 100%; height: 100%; padding: .3125rem; z-index: 0; } .input-control input:focus, .input-control textarea:focus, .input-control select:focus { outline: none; } .input-control input:disabled, .input-control textarea:disabled, .input-control select:disabled { background-color: #EBEBE4; } .input-control input:focus, .input-control textarea:focus, .input-control select:focus, .input-control input:hover, .input-control textarea:hover, .input-control select:hover { border-color: #787878; } .input-control textarea { position: relative; min-height: 6.25rem; font-family: "Segoe UI", "Open Sans", sans-serif, serif; } .input-control.textarea { height: auto; } .input-control.select { position: relative; } .input-control.select select { padding-right: 20px; font-size: 14px; } .input-control.rounded input, .input-control.rounded textarea, .input-control.rounded select { border-radius: 0.3125rem; } .input-control.big-input { height: 4.125rem; } .input-control.big-input input { font-size: 1.875rem; padding-left: 1.25rem ; } .input-control.big-input .button { height: 3.25rem; top: 50%; margin-top: -1.625rem; right: 0.3125rem; font-size: 1.125rem; font-weight: bold; padding-left: 1.875rem; padding-right: 1.875rem; } .input-control [class*=input-state-] { position: absolute; display: none; top: 50%; right: 8px; z-index: 3; font-size: 1rem; margin-top: -0.5rem; } .input-control.required input, .input-control.required textarea, .input-control.required select { border: 1px dashed #1ba1e2; } .input-control.required.neon input, .input-control.required.neon textarea, .input-control.required.neon select { box-shadow: 0 0 25px 0 rgba(89, 205, 226, 0.7); } .input-control.required .input-state-required { display: block; color: #1ba1e2; } .input-control.error input, .input-control.error textarea, .input-control.error select { border: 1px solid #ce352c; } .input-control.error.neon input, .input-control.error.neon textarea, .input-control.error.neon select { box-shadow: 0 0 25px 0 rgba(128, 0, 0, 0.7); } .input-control.error .input-state-error { display: block; color: #ce352c; } .input-control.warning input, .input-control.warning textarea, .input-control.warning select { border: 1px solid #e3c800; } .input-control.warning.neon input, .input-control.warning.neon textarea, .input-control.warning.neon select { box-shadow: 0 0 25px 0 rgba(255, 165, 0, 0.7); } .input-control.warning .input-state-warning { display: block; color: #e3c800; } .input-control.success input, .input-control.success textarea, .input-control.success select { border: 1px solid #60a917; } .input-control.success.neon input, .input-control.success.neon textarea, .input-control.success.neon select { box-shadow: 0 0 25px 0 rgba(0, 128, 0, 0.7); } .input-control.success .input-state-success { display: block; color: #60a917; } .input-control.info input, .input-control.info textarea, .input-control.info select { border: 1px solid #1ba1e2; } .input-control.info.neon input, .input-control.info.neon textarea, .input-control.info.neon select { box-shadow: 0 0 25px 0 rgba(89, 205, 226, 0.7); } .input-control.info .input-state-success { display: block; color: #1ba1e2; } input.error, select.error, textarea.error { border: 1px solid #ce352c; } input.warning, select.warning, textarea.warning { border: 1px solid #e3c800; } input.info, select.info, textarea.info { border: 1px solid #1ba1e2; } input.success, select.success, textarea.success { border: 1px solid #60a917; } input.required, select.required, textarea.required { border: 1px dashed #1ba1e2; } .input-control.file input[type=file] { position: absolute; opacity: 0; width: 0.0625rem; height: 0.0625rem; } .input-control.file input[type=file]:disabled ~ input[type=text], .input-control.file input[type=file]:disabled ~ .button { background-color: #EBEBE4; } .input-control.file:hover input[type=text], .input-control.file:hover button { border-color: #787878; } .input-control .button-group { position: absolute; right: 0; top: 0; margin: 0; padding: 0; z-index: 2; } .input-control .button-group:before, .input-control .button-group:after { display: table; content: ""; } .input-control .button-group:after { clear: both; } .input-control .button-group .button { position: relative; float: left; margin: 0; } .input-control > .helper-button, .input-control > .button-group > .helper-button { visibility: hidden; margin: 0; border: 0; height: 1.875rem; padding: 0 .6rem; z-index: 100; font-size: .75rem; } .input-control > .button.helper-button { margin: 2px 2px 0; } .input-control > .button-group > .button.helper-button { margin: 2px 0 ; } .input-control > .button-group > .button.helper-button:last-child { margin-right: 2px ; } .input-control input:focus ~ .helper-button, .input-control input:focus ~ .button-group > .helper-button { visibility: visible; } .input-control input ~ .helper-button:active, .input-control input ~ .button-group > .helper-button:active { visibility: visible; } .input-control input:disabled ~ .helper-button, .input-control input:disabled ~ .button-group > .helper-button { display: none ; } .input-control.modern { position: relative; width: 12.25rem; height: 3rem; display: inline-block; margin: .625rem 0; } .input-control.modern input { position: absolute; top: 1rem; left: 0; right: 0; bottom: .5rem; border: 0; border-bottom: 2px #DDDDDD solid; background-color: transparent; outline: none; font-size: 1rem; padding-bottom: .5rem; padding-left: 0; width: 100%; z-index: 2; height: 1.75rem; } .input-control.modern input:focus { border-bottom-color: #1d1d1d; } .input-control.modern .label, .input-control.modern .informer { position: absolute; display: block; z-index: 1; color: #1d1d1d; } .input-control.modern .label { opacity: 0; top: 16px; left: 0; transition: all 0.3s linear; } .input-control.modern .informer { opacity: 0; bottom: .75rem; color: #C8C8C8; font-size: .8rem; transition: all 0.3s linear; } .input-control.modern .placeholder { font-size: 1rem; color: #C8C8C8; position: absolute; top: 1.2rem; left: 0; z-index: 1; opacity: 1; transition: all 0.3s linear; } .input-control.modern .helper-button { top: 8px; } .input-control.modern.iconic { margin-left: 32px; } .input-control.modern.iconic .icon { width: 24px; height: 24px; font-size: 24px; line-height: 1; position: absolute; left: -28px; top: 50%; margin-top: -8px; display: block; opacity: .2; transition: all 0.3s linear; } .input-control.modern.iconic .icon img { width: 100%; max-width: 100%; height: 100%; max-height: 100%; } .input-control.modern.iconic.full-size { width: calc(100% - 32px) !important; } .input-control.modern input:focus ~ .label { opacity: 1; -webkit-transform: translateY(-18px); transform: translateY(-18px); transition: all 0.3s linear; } .input-control.modern input:focus ~ .placeholder { opacity: 0; -webkit-transform: translateX(200px); transform: translateX(200px); transition: all 0.3s linear; } .input-control.modern input:focus ~ .informer { opacity: 1; color: #1d1d1d; bottom: -0.75rem; transition: all 0.3s linear; } .input-control.modern input:focus ~ .icon { opacity: 1; transition: all 0.3s linear; } .input-control.modern.error input { border-bottom-color: #ce352c; } .input-control.modern.error .informer, .input-control.modern.error .label { color: #ce352c; } .input-control.modern.success input { border-bottom-color: #60a917; } .input-control.modern.success .informer, .input-control.modern.success .label { color: #60a917; } .input-control.modern.warning input { border-bottom-color: #e3c800; } .input-control.modern.warning .informer, .input-control.modern.warning .label { color: #e3c800; } .input-control.modern.info input { border-bottom-color: #1ba1e2; } .input-control.modern.info .informer, .input-control.modern.info .label { color: #1ba1e2; } .input-control.modern input:disabled { border-bottom-style: dotted; color: #BCBCBC; } .input-control.checkbox, .input-control.radio { line-height: 1.875rem; min-width: 1rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .input-control.checkbox input[type="checkbox"], .input-control.radio input[type="checkbox"], .input-control.checkbox input[type="radio"], .input-control.radio input[type="radio"] { position: absolute; opacity: 0; width: 0.0625rem; height: 0.0625rem; } .input-control.checkbox .caption, .input-control.radio .caption { margin: 0 .125rem; vertical-align: middle; } .input-control.checkbox .check, .input-control.radio .check { width: 1.625rem; height: 1.625rem; background-color: #ffffff; border: 1px #c1c1c1 solid; padding: 0; position: relative; display: inline-block; vertical-align: middle; } .input-control.checkbox.text-left .check, .input-control.radio.text-left .check { margin: 0 0 0 .3125rem; } .input-control.checkbox .check:focus, .input-control.radio .check:focus { border-color: #bcd9e2; } .input-control.checkbox .check:before, .input-control.radio .check:before { position: absolute; vertical-align: middle; color: transparent; font-size: 0; content: ""; height: .3125rem; width: .565rem; background-color: transparent; border-left: .1875rem solid; border-bottom: .1875rem solid; border-color: transparent; left: 50%; top: 50%; margin-left: -0.325rem; margin-top: -0.365rem; display: block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: all 0.2s linear; } .input-control.checkbox input[type=radio] ~ .check:before, .input-control.radio input[type=radio] ~ .check:before { border-color: transparent; } .input-control.checkbox input[type="checkbox"]:checked ~ .check:before, .input-control.radio input[type="checkbox"]:checked ~ .check:before, .input-control.checkbox input[type="radio"]:checked ~ .check:before, .input-control.radio input[type="radio"]:checked ~ .check:before { border-color: #5247bd; transition: all 0.2s linear; } .input-control.checkbox input[type="checkbox"]:disabled ~ .caption, .input-control.radio input[type="checkbox"]:disabled ~ .caption, .input-control.checkbox input[type="radio"]:disabled ~ .caption, .input-control.radio input[type="radio"]:disabled ~ .caption { color: #cacaca; cursor: default; } .input-control.checkbox input[type="checkbox"]:disabled ~ .check, .input-control.radio input[type="checkbox"]:disabled ~ .check, .input-control.checkbox input[type="radio"]:disabled ~ .check, .input-control.radio input[type="radio"]:disabled ~ .check { border-color: #cacaca; cursor: default; } .input-control.checkbox input[type="checkbox"]:disabled:checked ~ .check:before, .input-control.radio input[type="checkbox"]:disabled:checked ~ .check:before { border-color: #cacaca; } .input-control.checkbox input[type="radio"]:disabled:checked ~ .check:before, .input-control.radio input[type="radio"]:disabled:checked ~ .check:before { background-color: #cacaca; } .input-control.checkbox input[data-show="indeterminate"] ~ .check:before, .input-control.radio input[data-show="indeterminate"] ~ .check:before, .input-control.checkbox input[data-show="indeterminate"]:checked ~ .check:before, .input-control.radio input[data-show="indeterminate"]:checked ~ .check:before, .input-control.checkbox input.indeterminate:checked ~ .check:before, .input-control.radio input.indeterminate:checked ~ .check:before, .input-control.checkbox input[type="checkbox"]:indeterminate ~ .check:before, .input-control.radio input[type="checkbox"]:indeterminate ~ .check:before { display: none; } .input-control.checkbox input[data-show="indeterminate"] ~ .check:after, .input-control.radio input[data-show="indeterminate"] ~ .check:after, .input-control.checkbox input[data-show="indeterminate"]:checked ~ .check:after, .input-control.radio input[data-show="indeterminate"]:checked ~ .check:after, .input-control.checkbox input.indeterminate:checked ~ .check:after, .input-control.radio input.indeterminate:checked ~ .check:after, .input-control.checkbox input[type="checkbox"]:indeterminate ~ .check:after, .input-control.radio input[type="checkbox"]:indeterminate ~ .check:after { position: absolute; display: block; content: ""; background-color: #5247bd; height: .875rem; width: .875rem; left: 50%; top: 50%; margin-left: -0.4375rem; margin-top: -0.4375rem; } .input-control.checkbox input[data-show="indeterminate"]:not(:checked) ~ .check:after, .input-control.radio input[data-show="indeterminate"]:not(:checked) ~ .check:after { background-color: transparent; } .input-control.checkbox input[data-show="indeterminate"]:disabled ~ .check:after, .input-control.radio input[data-show="indeterminate"]:disabled ~ .check:after { background-color: #cacaca; } .input-control.radio .check { border: 1px #999999 solid; border-radius: 50%; } .input-control.radio .check:before { position: absolute; display: block; content: ""; background-color: #5247bd; height: .5624rem; width: .5624rem; left: 50%; top: 50%; margin-left: -0.375rem; margin-top: -0.375rem; -webkit-transform: rotate(0deg); transform: rotate(0deg); border-radius: 50%; } .input-control.radio input[type="radio"]:checked ~ .check:before { border-color: transparent; } .input-control.radio input[type="radio"]:not(:checked) ~ .check:before { background-color: transparent; } .input-control.radio input[type="radio"]:disabled ~ .check:before { border-color: transparent; } .input-control.small-check .check { width: 1rem; height: 1rem; } .input-control.small-check .check:before { width: 15px; height: 7px; margin-left: -7px; margin-top: -5px; border-width: 2px; } .input-control.small-check.radio .check:before { height: 7px; width: 7px; left: 47%; top: 47%; margin-left: -3px; margin-top: -3px; } .input-control.small-check input[data-show="indeterminate"] ~ .check:after, .input-control.small-check input[data-show="indeterminate"]:checked ~ .check:after, .input-control.small-check input.indeterminate:checked ~ .check:after, .input-control.small-check input[type="checkbox"]:indeterminate ~ .check:after { height: .375rem; width: .375rem; left: 50%; top: 50%; margin-left: -0.1875rem; margin-top: -0.1875rem; } input[type="button"], input[type="reset"], input[type="submit"] { padding: 0 1rem; height: 2.125rem; text-align: center; background-color: #ffffff; border: 1px #d9d9d9 solid; color: #262626; cursor: pointer; display: inline-block; outline: none; font-size: .875rem; margin: .15625rem 0; position: relative; vertical-align: middle; } input[type="button"].default, input[type="reset"].default, input[type="submit"].default { background-color: #008287; color: #fff; } input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #787878; } input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background: #eeeeee; color: #262626; box-shadow: none; } input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus { outline: 0; } input[type="button"]:disabled, input[type="reset"]:disabled, input[type="submit"]:disabled, input[type="button"].disabled, input[type="reset"].disabled, input[type="submit"].disabled { background-color: #eaeaea; color: #bebebe; cursor: default; border-color: transparent; } input[type="button"] *, input[type="reset"] *, input[type="submit"] * { color: inherit; } input[type="button"] *:hover, input[type="reset"] *:hover, input[type="submit"] *:hover { color: inherit; } input[type="button"].rounded, input[type="reset"].rounded, input[type="submit"].rounded { border-radius: .325rem; } input[type="button"] > [class*=mif-], input[type="reset"] > [class*=mif-], input[type="submit"] > [class*=mif-] { vertical-align: middle; } input[type="button"] img, input[type="reset"] img, input[type="submit"] img { height: .875rem; vertical-align: middle; margin: 0; } input[type="button"].loading-pulse, input[type="reset"].loading-pulse, input[type="submit"].loading-pulse { position: relative; padding: 0 1.325rem; } input[type="button"].loading-pulse:before, input[type="reset"].loading-pulse:before, input[type="submit"].loading-pulse:before { position: absolute; content: ""; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; background-color: #333; border-radius: 100%; -webkit-animation: scaleout 1s infinite ease-in-out; animation: scaleout 1s infinite ease-in-out; } input[type="button"].loading-pulse.lighten:before, input[type="reset"].loading-pulse.lighten:before, input[type="submit"].loading-pulse.lighten:before { background-color: #fff; } input[type="button"].loading-cube, input[type="reset"].loading-cube, input[type="submit"].loading-cube { position: relative; padding: 0 1.325rem; } input[type="button"].loading-cube:before, input[type="reset"].loading-cube:before, input[type="submit"].loading-cube:before, input[type="button"].loading-cube:after, input[type="reset"].loading-cube:after, input[type="submit"].loading-cube:after { content: ""; background-color: #333; width: 5px; height: 5px; position: absolute; top: 50%; left: 3px; margin-top: -8px; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } input[type="button"].loading-cube:after, input[type="reset"].loading-cube:after, input[type="submit"].loading-cube:after { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } input[type="button"].loading-cube.lighten:before, input[type="reset"].loading-cube.lighten:before, input[type="submit"].loading-cube.lighten:before, input[type="button"].loading-cube.lighten:after, input[type="reset"].loading-cube.lighten:after, input[type="submit"].loading-cube.lighten:after { background-color: #fff; } input[type="butto