metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
1,027 lines (1,026 loc) • 23.2 kB
CSS
/*
* Metro 4 Components Library v4.2.38 (https://metroui.org.ua)
* Copyright 2019 Sergey Pimenov
* Licensed under MIT
*/
.bg-scheme {
background-color: #2B2B2B ;
}
.fg-scheme {
color: #ffffff ;
}
.bg-scheme-secondary {
background-color: #3a3a3a ;
}
.fg-scheme-secondary {
color: #BBBBBB ;
}
.bg-control {
background-color: #585b5d ;
}
.fg-control {
color: #ffffff ;
}
.bd-default {
border-color: #585b5d ;
}
.disabled {
cursor: default;
}
body {
font-size: 16px;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
color: #ffffff;
background-color: #2B2B2B;
}
hr {
background-color: #585b5d;
}
input[type=text],
input[type=password],
input[type=tel],
input[type=datetime-local],
input[type=email],
input[type=file],
input[type=month],
input[type=number],
input[type=search],
input[type=time],
input[type=url],
input[type=week],
input[type=file],
select,
textarea,
.file,
.input,
.textarea,
.select {
background-color: #2B2B2B;
color: #ffffff;
border-color: #585b5d ;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=file]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
input[type=file]:focus,
select:focus,
textarea:focus,
.file:focus,
.input:focus,
.textarea:focus,
.select:focus,
input[type=text].focused,
input[type=password].focused,
input[type=tel].focused,
input[type=datetime-local].focused,
input[type=email].focused,
input[type=file].focused,
input[type=month].focused,
input[type=number].focused,
input[type=search].focused,
input[type=time].focused,
input[type=url].focused,
input[type=week].focused,
input[type=file].focused,
select.focused,
textarea.focused,
.file.focused,
.input.focused,
.textarea.focused,
.select.focused {
-webkit-box-shadow: 0 0 0 3px rgba(88, 91, 93, 0.45);
box-shadow: 0 0 0 3px rgba(88, 91, 93, 0.45);
}
.input,
.select,
.textarea,
.file {
border-style: solid ;
}
.input .prepend,
.select .prepend,
.textarea .prepend,
.file .prepend {
background-color: #585b5d;
color: #ffffff;
}
.input input,
.select input,
.textarea input,
.file input,
.input select,
.select select,
.textarea select,
.file select,
.input textarea,
.select textarea,
.textarea textarea,
.file textarea {
-webkit-box-shadow: none ;
box-shadow: none ;
border-color: transparent;
}
.file .button {
background-color: #585b5d;
color: #ffffff;
}
.select .active a {
background-color: #585b5d ;
color: #ffffff ;
}
.checkbox .check {
border-color: #585b5d;
}
.checkbox .check::before {
border-color: #ffffff;
}
.checkbox input[type=checkbox]:checked ~ .check {
border-color: #585b5d;
background-color: #585b5d;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.checkbox input[type=checkbox]:checked ~ .check::before {
border-color: #ffffff;
}
.checkbox input[type=checkbox]:disabled ~ .check {
border-color: rgba(88, 91, 93, 0.25);
background-color: rgba(88, 91, 93, 0.25);
}
.checkbox input[type=checkbox]:disabled ~ .check::before {
border-color: rgba(88, 91, 93, 0.25);
}
.checkbox input[data-indeterminate=true] ~ .check {
border-color: #585b5d;
background-color: #585b5d;
}
.radio .check {
border-color: #585b5d;
}
.radio input[type=radio]:checked ~ .check {
border-color: #585b5d;
background-color: #585b5d;
}
.radio input[type=radio]:checked ~ .check::before {
border-color: #ffffff;
background-color: #ffffff;
}
.radio input[type=radio]:disabled ~ .check {
border-color: rgba(88, 91, 93, 0.25);
background-color: rgba(88, 91, 93, 0.25);
}
.radio input[type=radio]:disabled ~ .check::before {
border-color: rgba(88, 91, 93, 0.25);
background-color: rgba(88, 91, 93, 0.25);
}
.checkbox .check,
.radio .check {
color: #ffffff;
}
.switch .check {
border-color: #585b5d;
}
.switch .check::after {
border-color: #585b5d;
background-color: #585b5d;
}
.switch input[type="checkbox"]:checked ~ .check {
border-color: #585b5d;
background-color: #585b5d;
}
.switch input[type="checkbox"]:disabled ~ .check {
border-color: rgba(88, 91, 93, 0.25);
background-color: rgba(88, 91, 93, 0.25);
}
.switch input[type="checkbox"]:disabled ~ .check::after {
border-color: rgba(88, 91, 93, 0.25);
background-color: rgba(88, 91, 93, 0.25);
}
.switch input[type="checkbox"]:disabled:not(:checked) ~ .check::after {
opacity: 0.5;
}
.button,
.command-button,
.shortcut,
.tool-button {
background-color: #585b5d;
color: #ffffff;
}
.button:active,
.command-button:active,
.shortcut:active,
.tool-button:active,
.button.focus,
.command-button.focus,
.shortcut.focus,
.tool-button.focus,
.button:focus,
.command-button:focus,
.shortcut:focus,
.tool-button:focus {
-webkit-box-shadow: 0 0 0 3px rgba(88, 91, 93, 0.45);
box-shadow: 0 0 0 3px rgba(88, 91, 93, 0.45);
}
.button:hover,
.command-button:hover,
.shortcut:hover,
.tool-button:hover {
background-color: #4c4e50;
}
.info-button {
border-color: #585b5d;
}
.info-button .button {
background-color: #585b5d;
color: #ffffff;
}
.info-button .button:hover {
background-color: #4c4e50;
}
.image-button {
border-color: #585b5d;
}
.image-button .icon {
background-color: #585b5d;
color: #ffffff;
}
.image-button .icon:hover {
background-color: #4c4e50;
}
.breadcrumbs {
background-color: #2B2B2B;
color: #585b5d;
}
.breadcrumbs .page-item::before,
.breadcrumbs .page-item::after {
background-color: #585b5d ;
}
.breadcrumbs .page-link:hover {
color: #4c4e50;
}
.pagination .page-item:not(.no-link) {
background-color: #585b5d;
color: #ffffff;
border: 1px #585b5d solid;
}
.pagination .page-item.active,
.pagination .page-item:hover {
background-color: #4c4e50;
}
.pagination .no-link {
background-color: transparent;
color: #585b5d;
}
.accordion .frame .heading {
background-color: #585b5d;
color: #ffffff;
}
.accordion .frame {
margin: 0;
}
.accordion .frame + .frame {
border-top: 1px rgba(88, 91, 93, 0.25) solid;
}
.h-menu {
background-color: #585b5d;
color: #ffffff;
}
.h-menu > li > a.dropdown-toggle::before {
border-color: #ffffff;
}
.d-menu,
.v-menu {
background-color: #ffffff ;
color: #585b5d;
border: 1px solid #585b5d;
-webkit-box-shadow: none;
box-shadow: none;
}
.d-menu .dropdown-toggle::before,
.v-menu .dropdown-toggle::before {
border-color: #585b5d ;
}
.d-menu li:hover,
.v-menu li:hover {
background-color: #585b5d ;
color: #ffffff ;
}
.d-menu li:hover .dropdown-toggle::before,
.v-menu li:hover .dropdown-toggle::before {
border-color: #ffffff ;
}
.d-menu .divider,
.v-menu .divider {
background-color: #585b5d ;
}
.d-menu .menu-title,
.v-menu .menu-title {
background-color: #3f4143;
color: #ffffff;
}
.d-menu .disabled,
.v-menu .disabled {
color: rgba(88, 91, 93, 0.5) ;
}
.v-menu .v-menu {
border: none ;
}
.t-menu {
background-color: #585b5d;
color: #ffffff;
-webkit-box-shadow: none;
box-shadow: none;
}
.t-menu li a {
border-color: rgba(255, 255, 255, 0.25) ;
}
.t-menu .dropdown-toggle::after {
border-color: transparent transparent #ffffff transparent;
}
.app-bar {
background-color: #585b5d;
color: #ffffff;
}
.app-bar .dropdown-toggle::before {
border-color: #ffffff;
}
.app-bar .app-bar-menu li .d-menu,
.app-bar .app-bar-container .d-menu {
background-color: #585b5d ;
color: #ffffff ;
}
.app-bar .app-bar-menu li .d-menu li:hover,
.app-bar .app-bar-container .d-menu li:hover {
background-color: rgba(29, 29, 29, 0.1) ;
}
.app-bar .app-bar-menu li .divider,
.app-bar .app-bar-container .divider {
background-color: rgba(255, 255, 255, 0.25);
}
[class*=app-bar-expand] .app-bar-menu li .d-menu,
[class*=app-bar-expand] .app-bar-container .d-menu {
-webkit-box-shadow: none ;
box-shadow: none ;
border: 1px solid #585b5d ;
background-color: #ffffff ;
color: #585b5d ;
}
[class*=app-bar-expand] .app-bar-menu li .d-menu li:hover,
[class*=app-bar-expand] .app-bar-container .d-menu li:hover {
background-color: #585b5d ;
color: #ffffff ;
}
.calendar {
border-color: #585b5d;
}
.calendar .calendar-header {
background-color: #585b5d;
color: #ffffff;
}
.calendar .day.today {
background-color: #585b5d;
}
.calendar .day.selected {
-webkit-box-shadow: 0 0 0 1px #585b5d ;
box-shadow: 0 0 0 1px #585b5d ;
}
.calendar .day.selected::after {
border-top-color: #585b5d;
}
.calendar .calendar-years > .years-list li.active,
.calendar .calendar-months > .months-list li.active {
background-color: #585b5d;
color: #ffffff;
}
.calendar .calendar-footer {
border-top-color: rgba(88, 91, 93, 0.25);
}
.calendar .week-days {
border-top-color: rgba(88, 91, 93, 0.25);
border-bottom-color: rgba(88, 91, 93, 0.25);
}
[class*=calendar-wide] .calendar-footer {
border-left-color: rgba(88, 91, 93, 0.25);
}
.countdown {
line-height: 1.5;
}
.countdown .part {
color: #ffffff;
}
.wheel-picker {
background-color: #2B2B2B;
color: #ffffff;
}
.wheel-picker .date-wrapper,
.wheel-picker .time-wrapper {
border-color: #585b5d;
}
.wheel-picker .select-block {
background-color: #585b5d;
color: #ffffff;
}
.wheel-picker .select-block ul {
border-color: rgba(88, 91, 93, 0.25);
}
.wheel-picker .action-block {
border-top: 1px rgba(88, 91, 93, 0.25) solid;
}
.wheel-picker .action-block .button {
color: #ffffff;
}
.dialog {
background-color: #2B2B2B;
color: #ffffff;
border: 1px solid #585b5d;
}
.dialog .dialog-actions {
border-top-color: #585b5d;
}
.keypad .keys {
background-color: #2B2B2B;
border-color: #585b5d;
color: #ffffff;
}
.keypad .key.service-key {
background-color: #3f4143;
}
.hint {
background-color: #3a3a3a;
color: #ffffff;
}
.listview {
background-color: #2B2B2B;
color: #ffffff;
}
.listview .node:hover {
background-color: rgba(88, 91, 93, 0.25);
color: #ffffff;
}
.listview .node.current-select {
background-color: #585b5d;
color: #ffffff;
border-color: #585b5d ;
}
.listview .node-group .node-toggle::before {
border-color: #ffffff;
}
.listview.view-content .node + .node {
border-top-color: #585b5d;
}
.master {
background-color: #3a3a3a;
color: #ffffff;
}
.master .controls .next,
.master .controls .prev {
color: #585b5d;
}
.master .controls .next.disabled,
.master .controls .prev.disabled {
color: rgba(88, 91, 93, 0.25);
}
.master .pages {
border-color: #585b5d;
}
.navview .navview-pane {
background-color: #3a3a3a;
color: #BBBBBB;
}
.navview .navview-pane .pull-button:hover,
.navview .navview-pane .holder:hover,
.navview .navview-pane .navview-menu li a:hover {
background-color: rgba(29, 29, 29, 0.1);
}
.navview .navview-pane .pull-button:active,
.navview .navview-pane .holder:active,
.navview .navview-pane .navview-menu li a:active,
.navview .navview-pane .pull-button:focus,
.navview .navview-pane .holder:focus,
.navview .navview-pane .navview-menu li a:focus {
background-color: #3f4143;
}
.navview .navview-pane .pull-button:focus,
.navview .navview-pane .holder:focus,
.navview .navview-pane .navview-menu li a:focus {
border: 2px solid #3f4143;
}
.navview .navview-pane .dropdown-toggle::after {
border-color: transparent transparent #ffffff transparent;
}
.navview .navview-content {
background-color: #2B2B2B;
color: #ffffff;
}
.notify {
background-color: #3a3a3a;
color: #BBBBBB;
border: 1px solid #585b5d;
}
.panel {
background-color: #3a3a3a;
color: #BBBBBB;
border-color: rgba(88, 91, 93, 0.25) ;
}
.panel .panel-title {
background-color: #585b5d;
color: #ffffff;
border-bottom-color: rgba(255, 255, 255, 0.25);
}
.panel .panel-title .dropdown-toggle {
border-left-color: rgba(255, 255, 255, 0.25);
}
.panel .panel-title .dropdown-toggle::before {
border-color: #ffffff;
}
.panel .panel-title .icon {
border-right-color: rgba(255, 255, 255, 0.25);
}
.window {
border-color: rgba(88, 91, 93, 0.25);
background-color: #2B2B2B;
color: #ffffff;
}
.window .window-caption {
background-color: #585b5d;
color: #ffffff;
}
.window .window-content {
background-color: #3a3a3a;
color: #BBBBBB;
}
.resize-element::after {
border-bottom-color: #585b5d;
}
.popover {
background-color: #3a3a3a;
color: #BBBBBB;
border-color: #585b5d;
}
.rating .stars li {
color: rgba(88, 91, 93, 0.25);
}
.rating .stars li.on {
color: #585b5d;
}
.rating:not(.static) .stars:hover li {
color: #585b5d;
}
.rating:not(.static) .stars li:hover ~ li {
color: rgba(88, 91, 93, 0.25) ;
}
.sidenav-simple,
.sidenav-counter {
background-color: #2B2B2B;
color: #585b5d;
}
.sidenav-simple .active,
.sidenav-counter .active,
.sidenav-simple li.active:hover,
.sidenav-counter li.active:hover {
background-color: #585b5d;
color: #ffffff;
}
.sidenav-simple li.disabled,
.sidenav-counter li.disabled {
color: rgba(255, 255, 255, 0.25) ;
}
.sidenav-m3 {
background-color: #585b5d;
color: #ffffff;
}
.sidenav-m3 a {
background-color: #585b5d;
}
.sidenav-m3 a:hover {
background-color: rgba(29, 29, 29, 0.1);
}
.sidenav-m3 li.disabled {
color: rgba(255, 255, 255, 0.25) ;
}
.sidenav-m3 li + li {
border-top-color: #585b5d;
}
.sidenav-m3 .d-menu {
background-color: #3f4143 ;
border-color: #585b5d;
margin-bottom: 4px;
}
.sidenav-m3 .d-menu li {
border-color: #585b5d ;
color: #ffffff ;
}
.sidenav-m3 .d-menu li.disabled {
color: rgba(255, 255, 255, 0.25) ;
}
.sidenav-m3 .dropdown-toggle::before {
border-color: #ffffff;
}
.slider .backside {
background-color: rgba(88, 91, 93, 0.25);
}
.slider .buffer {
background-color: #ffffff;
}
.slider .complete {
background-color: #585b5d;
}
.slider .marker {
background-color: #ffffff;
}
.stepper::before {
background-color: #3a3a3a;
}
.stepper .step {
background-color: #3a3a3a;
color: #ffffff;
}
.stepper .step.complete {
background-color: #585b5d;
color: #ffffff;
}
.stepper .step.current {
background-color: #ffffff;
color: #000000;
}
.streamer .streams {
background-color: #2B2B2B;
color: #ffffff;
}
.streamer .streamer-action {
background-color: #585b5d;
color: #ffffff;
}
.streamer .stream {
border-color: #585b5d;
}
.streamer .event-group {
background-color: #2B2B2B;
color: #ffffff;
}
.streamer .stream-event {
background-color: #3a3a3a;
color: #BBBBBB;
border-color: #585b5d;
}
.streamer .stream-event:hover {
border-color: #8a8e91;
}
.streamer .stream-event.selected {
-webkit-box-shadow: 0 0 0 1px #585b5d ;
box-shadow: 0 0 0 1px #585b5d ;
}
.streamer .stream-event.selected::before {
border-color: #ffffff ;
}
.streamer .stream-event.selected::after {
border-top-color: #585b5d;
}
.streamer .stream-event-slide .slide-data .title {
color: #ffffff;
}
.streamer .stream-event-slide .slide-data .subtitle,
.streamer .stream-event-slide .slide-data .desc {
color: #BBBBBB;
}
.table thead {
border-bottom-color: #585b5d;
}
.table tfoot {
border-top-color: #585b5d;
}
.table .sortable-column.sort-asc,
.table .sortable-column.sort-desc {
background-color: #585b5d;
color: #ffffff;
}
.table .sortable-column.sort-asc:after,
.table .sortable-column.sort-desc:after {
color: #ffffff;
}
.table.striped tbody tr:nth-child(odd) {
background: #3a3a3a;
}
.table.table-border {
border-color: #585b5d;
}
.table.cell-border th,
.table.cell-border td {
border-color: #585b5d;
}
.tabs {
background-color: #2B2B2B;
color: #ffffff;
border-color: #585b5d;
}
.tabs > ul > li {
background-color: #3a3a3a;
color: #BBBBBB;
}
.tabs > ul > li:hover {
background-color: rgba(88, 91, 93, 0.25);
}
.tabs > ul > li.active {
background-color: #585b5d;
color: #ffffff;
}
.tabs .disabled {
color: rgba(255, 255, 255, 0.25) ;
}
.tabs.vertical > ul {
border-right-color: #585b5d;
}
.tabs.vertical > ul > li {
border-right-color: #585b5d;
}
.tabs.vertical > ul > li.active {
border-color: #585b5d;
}
.tabs.vertical.right > ul {
border-left-color: #585b5d;
}
.tabs.vertical.right > ul > li {
border-left-color: #585b5d;
}
.tabs.vertical.right > ul > li.active {
border-color: #585b5d;
}
[class*=tabs-expand] > ul {
border-bottom-color: #585b5d;
}
[class*=tabs-expand] > ul > li {
border-bottom-color: #585b5d;
}
[class*=tabs-expand] > ul > li.active {
border-color: #585b5d;
}
.topbar {
background-color: #585b5d;
color: #ffffff;
}
.topbar .topbar-brand,
.topbar .topbar-element,
.topbar .topbar-menu {
color: #ffffff;
}
.treeview {
background-color: #2B2B2B;
color: #BBBBBB;
}
.treeview .node-toggle::before {
border-color: #BBBBBB ;
}
.treeview li.current > .caption {
color: #ffffff;
}
.wizard {
background-color: #2B2B2B;
color: #ffffff;
border-color: #585b5d;
}
.wizard > section,
.wizard.section {
border-color: #000000;
}
.wizard > section:nth-child(1),
.wizard.section:nth-child(1) {
border-color: #585b5d;
}
.wizard > section:nth-child(2),
.wizard.section:nth-child(2) {
border-color: #4c4e50;
}
.wizard > section:nth-child(3),
.wizard.section:nth-child(3) {
border-color: #3f4143;
}
.wizard > section:nth-child(4),
.wizard.section:nth-child(4) {
border-color: #333536;
}
.wizard > section:nth-child(5),
.wizard.section:nth-child(5) {
border-color: #262829;
}
.wizard > section:nth-child(6),
.wizard.section:nth-child(6) {
border-color: #1a1b1b;
}
.wizard > section:nth-child(7),
.wizard.section:nth-child(7) {
border-color: #0e0e0e;
}
.wizard > section:nth-child(8),
.wizard.section:nth-child(8) {
border-color: #010101;
}
.wizard > section:nth-child(9),
.wizard.section:nth-child(9) {
border-color: #000000;
}
.wizard > section:nth-child(10),
.wizard.section:nth-child(10) {
border-color: #000000;
}
.wizard > section::before,
.wizard.section::before {
color: #ffffff;
}
.wizard > section.complete,
.wizard.section.complete {
border-color: #000000;
}
.wizard > section.complete:nth-child(1),
.wizard.section.complete:nth-child(1) {
border-color: #3a3a3a;
}
.wizard > section.complete:nth-child(2),
.wizard.section.complete:nth-child(2) {
border-color: #2d2d2d;
}
.wizard > section.complete:nth-child(3),
.wizard.section.complete:nth-child(3) {
border-color: #212121;
}
.wizard > section.complete:nth-child(4),
.wizard.section.complete:nth-child(4) {
border-color: #141414;
}
.wizard > section.complete:nth-child(5),
.wizard.section.complete:nth-child(5) {
border-color: #070707;
}
.wizard > section.complete:nth-child(6),
.wizard.section.complete:nth-child(6) {
border-color: #000000;
}
.wizard > section.complete:nth-child(7),
.wizard.section.complete:nth-child(7) {
border-color: #000000;
}
.wizard > section.complete:nth-child(8),
.wizard.section.complete:nth-child(8) {
border-color: #000000;
}
.wizard > section.complete:nth-child(9),
.wizard.section.complete:nth-child(9) {
border-color: #000000;
}
.wizard > section.complete:nth-child(10),
.wizard.section.complete:nth-child(10) {
border-color: #000000;
}
.wizard > section.complete::before,
.wizard.section.complete::before {
color: #BBBBBB;
}
.wizard > section.current::before,
.wizard.section.current::before {
color: #ffffff;
background-color: #585b5d;
}
.wizard .action-bar button {
border-color: #585b5d;
color: #ffffff;
}
.ribbon-menu .tabs-holder .static {
background-color: #585b5d;
color: #ffffff;
}
.ribbon-menu .tabs-holder .static:hover {
border-color: transparent ;
}
.ribbon-menu .ribbon-button,
.ribbon-menu .ribbon-tool-button,
.ribbon-menu .ribbon-split,
.ribbon-menu .ribbon-main,
.ribbon-menu .ribbon-icon-button {
color: #ffffff;
}
.ribbon-menu .ribbon-button:hover,
.ribbon-menu .ribbon-tool-button:hover,
.ribbon-menu .ribbon-split:hover,
.ribbon-menu .ribbon-main:hover,
.ribbon-menu .ribbon-icon-button:hover {
border-color: rgba(88, 91, 93, 0.25);
background-color: rgba(58, 58, 58, 0.25);
}
.ribbon-menu .ribbon-button:active,
.ribbon-menu .ribbon-tool-button:active,
.ribbon-menu .ribbon-split:active,
.ribbon-menu .ribbon-main:active,
.ribbon-menu .ribbon-icon-button:active,
.ribbon-menu .ribbon-button.active,
.ribbon-menu .ribbon-tool-button.active,
.ribbon-menu .ribbon-split.active,
.ribbon-menu .ribbon-main.active,
.ribbon-menu .ribbon-icon-button.active {
border-color: rgba(88, 91, 93, 0.25);
background-color: rgba(43, 43, 43, 0.25);
}
.ribbon-menu .ribbon-split-button:hover {
border-color: rgba(88, 91, 93, 0.25);
}
.ribbon-menu .ribbon-split-button:hover .ribbon-split {
border-color: rgba(88, 91, 93, 0.25);
}
.ribbon-menu .ribbon-dropdown {
-webkit-box-shadow: none;
box-shadow: none;
}
.ribbon-menu .ribbon-dropdown li:hover {
border-color: rgba(88, 91, 93, 0.25);
background-color: rgba(58, 58, 58, 0.25);
}
.ribbon-menu .ribbon-dropdown .checked::after {
border-color: rgba(88, 91, 93, 0.25);
background-color: rgba(58, 58, 58, 0.25);
}
.navview .navview-pane .navview-menu li.active::before {
background-color: #fa6800;
}
.rating .stars li.on {
color: #f8f8f8;
}
.rating:not(.static) .stars:hover li {
color: #f8f8f8;
}
.ribbon-menu .ribbon-button,
.ribbon-menu .ribbon-tool-button,
.ribbon-menu .ribbon-split,
.ribbon-menu .ribbon-main,
.ribbon-menu .ribbon-icon-button {
color: #585b5d;
}
.wizard > section.complete,
.wizard > .section.complete {
border-color: #000000;
}
.wizard > section.complete:nth-child(1),
.wizard > .section.complete:nth-child(1) {
border-color: #585b5d;
}
.wizard > section.complete:nth-child(2),
.wizard > .section.complete:nth-child(2) {
border-color: #4c4e50;
}
.wizard > section.complete:nth-child(3),
.wizard > .section.complete:nth-child(3) {
border-color: #3f4143;
}
.wizard > section.complete:nth-child(4),
.wizard > .section.complete:nth-child(4) {
border-color: #333536;
}
.wizard > section.complete:nth-child(5),
.wizard > .section.complete:nth-child(5) {
border-color: #262829;
}
.wizard > section.complete:nth-child(6),
.wizard > .section.complete:nth-child(6) {
border-color: #1a1b1b;
}
.wizard > section.complete:nth-child(7),
.wizard > .section.complete:nth-child(7) {
border-color: #0e0e0e;
}
.wizard > section.complete:nth-child(8),
.wizard > .section.complete:nth-child(8) {
border-color: #010101;
}
.wizard > section.complete:nth-child(9),
.wizard > .section.complete:nth-child(9) {
border-color: #000000;
}
.wizard > section.complete:nth-child(10),
.wizard > .section.complete:nth-child(10) {
border-color: #000000;
}
.wizard > section.complete::before,
.wizard > .section.complete::before {
color: #ffffff;
}
.master .controls .next,
.master .controls .prev {
color: #ffffff;
}
.master .controls .next.disabled,
.master .controls .prev.disabled {
color: #585b5d ;
}
.table {
color: #BBBBBB;
}
.table thead th,
.table thead td {
color: #ffffff;
}