metro_ui_rails 0.1.0

data/app/assets/stylesheets/metro-responsive.min.css

@@ -0,0 +1 @@
+.flexbox{display:-webkit-flex;display:flex}.flex-dir-row{-webkit-flex-direction:row;flex-direction:row}.flex-dir-row-reverse{-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.flex-dir-column{-webkit-flex-direction:column;flex-direction:column}.flex-dir-column-reverse{-webkit-flex-direction:column-reverse;flex-direction:column-reverse}.flex-wrap{-webkit-flex-wrap:wrap;flex-wrap:wrap}.flex-wrap-reverse{-webkit-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex-no-wrap{-webkit-flex-wrap:nowrap;flex-wrap:nowrap}.flex-just-start{-webkit-justify-content:flex-start;justify-content:flex-start}.flex-just-end{-webkit-justify-content:flex-end;justify-content:flex-end}.flex-just-center{-webkit-justify-content:center;justify-content:center}.flex-just-sa{-webkit-justify-content:space-around;justify-content:space-around}.flex-just-sb{-webkit-justify-content:space-between;justify-content:space-between}.flex-align-stretch{-webkit-align-items:stretch;align-items:stretch}.flex-align-start{-webkit-align-items:flex-start;align-items:flex-start}.flex-align-end{-webkit-align-items:flex-end;align-items:flex-end}.flex-align-center{-webkit-align-items:center;align-items:center}.flex-align-base{-webkit-align-items:baseline;align-items:baseline}.flex-content-stretch{-webkit-align-content:stretch;align-content:stretch}.flex-content-start{-webkit-align-content:flex-start;align-content:flex-start}.flex-content-end{-webkit-align-content:flex-end;align-content:flex-end}.flex-content-center{-webkit-align-content:center;align-content:center}.flex-content-sb{-webkit-align-content:space-between;align-content:space-between}.flex-content-sa{-webkit-align-content:space-around;align-content:space-around}.flex-self-auto{-webkit-align-self:auto;align-self:auto}.flex-self-start{-webkit-align-self:flex-start;align-self:flex-start}.flex-self-end{-webkit-align-self:flex-end;align-self:flex-end}.flex-self-center{-webkit-align-self:center;align-self:center}.flex-self-base{-webkit-align-self:baseline;align-self:baseline}.flex-self-stretch{-webkit-align-self:stretch;align-self:stretch}.no-shrink{-webkit-flex-shrink:0!important;flex-shrink:0!important}.no-grow{-webkit-flex-grow:0!important;flex-grow:0!important}.flex-size-auto{-webkit-flex:1 auto;flex:1 auto}.flex-size1{-webkit-flex-grow:1;flex-grow:1}.flex-size2{-webkit-flex-grow:2;flex-grow:2}.flex-size3{-webkit-flex-grow:3;flex-grow:3}.flex-size4{-webkit-flex-grow:4;flex-grow:4}.flex-size5{-webkit-flex-grow:5;flex-grow:5}.flex-size6{-webkit-flex-grow:6;flex-grow:6}.flex-size7{-webkit-flex-grow:7;flex-grow:7}.flex-size8{-webkit-flex-grow:8;flex-grow:8}.flex-size9{-webkit-flex-grow:9;flex-grow:9}.flex-size10{-webkit-flex-grow:10;flex-grow:10}.flex-size11{-webkit-flex-grow:11;flex-grow:11}.flex-size12{-webkit-flex-grow:12;flex-grow:12}.flex-size-p10{-webkit-flex:0 0 10%;flex:0 0 10%}.flex-size-p20{-webkit-flex:0 0 20%;flex:0 0 20%}.flex-size-p30{-webkit-flex:0 0 30%;flex:0 0 30%}.flex-size-p40{-webkit-flex:0 0 40%;flex:0 0 40%}.flex-size-p50{-webkit-flex:0 0 50%;flex:0 0 50%}.flex-size-p60{-webkit-flex:0 0 60%;flex:0 0 60%}.flex-size-p70{-webkit-flex:0 0 70%;flex:0 0 70%}.flex-size-p80{-webkit-flex:0 0 80%;flex:0 0 80%}.flex-size-p90{-webkit-flex:0 0 90%;flex:0 0 90%}.flex-size-p100{-webkit-flex:0 0 100%;flex:0 0 100%}.flex-size-x100{-webkit-flex:0 0 100px;flex:0 0 100px}.flex-size-x200{-webkit-flex:0 0 200px;flex:0 0 200px}.flex-size-x300{-webkit-flex:0 0 300px;flex:0 0 300px}.flex-size-x400{-webkit-flex:0 0 400px;flex:0 0 400px}.flex-size-x500{-webkit-flex:0 0 500px;flex:0 0 500px}.flex-size-x600{-webkit-flex:0 0 600px;flex:0 0 600px}.flex-size-x700{-webkit-flex:0 0 700px;flex:0 0 700px}.flex-size-x800{-webkit-flex:0 0 800px;flex:0 0 800px}.flex-size-x900{-webkit-flex:0 0 900px;flex:0 0 900px}.flex-size-x1000{-webkit-flex:0 0 1000px;flex:0 0 1000px}@media screen and (min-width:1401px){html{font-size:120%}}@media screen and (max-width:1400px){html{font-size:110%}}@media screen and (max-width:1200px){html{font-size:100%}}@media screen and (max-width:768px){html{font-size:100%}}@media screen and (max-width:640px){html{font-size:90%}}@media screen and (min-width:1401px){.container{width:1200px}}@media screen and (max-width:992px){.container{width:100%;padding:10px}}@media screen and (max-width:768px){.container{width:100%;padding:10px}}@media screen and (max-width:640px){.container{width:100%;padding:10px}}@media screen and (max-width:320px){html{font-size:80%}.container{width:100%;padding:5px}}@media only screen and (max-width:800px){.flex-grid .row{-webkit-flex-wrap:wrap;flex-wrap:wrap}.flex-grid .row .cell,.flex-grid .row .cell[class*=size]{-webkit-flex:0 0 50%;flex:0 0 50%}.flex-grid .row .cell:nth-child(1):last-child,.flex-grid .row .cell:nth-child(11):last-child,.flex-grid .row .cell:nth-child(3):last-child,.flex-grid .row .cell:nth-child(5):last-child,.flex-grid .row .cell:nth-child(7):last-child,.flex-grid .row .cell:nth-child(9):last-child,.flex-grid .row .cell[class*=size]:nth-child(1):last-child,.flex-grid .row .cell[class*=size]:nth-child(11):last-child,.flex-grid .row .cell[class*=size]:nth-child(3):last-child,.flex-grid .row .cell[class*=size]:nth-child(5):last-child,.flex-grid .row .cell[class*=size]:nth-child(7):last-child,.flex-grid .row .cell[class*=size]:nth-child(9):last-child{-webkit-flex-basis:100%;flex-basis:100%}}@media screen and (max-width:800px){h1,h2,h3,h4,h5,h6,p{margin:.625rem}.grid .row,.grid .row[class*=cells]{margin:0}.grid .row>.cell,.grid .row>.cell[class*=colspan],.grid .row[class*=cells]>.cell,.grid .row[class*=cells]>.cell[class*=colspan]{width:48.936175%;margin-bottom:10px}.grid .row>.cell:nth-child(odd),.grid .row>.cell[class*=colspan]:nth-child(odd),.grid .row[class*=cells]>.cell:nth-child(odd),.grid .row[class*=cells]>.cell[class*=colspan]:nth-child(odd){margin-left:0}.grid .row>.cell:nth-child(1):last-child,.grid .row>.cell:nth-child(11):last-child,.grid .row>.cell:nth-child(3):last-child,.grid .row>.cell:nth-child(5):last-child,.grid .row>.cell:nth-child(7):last-child,.grid .row>.cell:nth-child(9):last-child,.grid .row>.cell[class*=colspan]:nth-child(1):last-child,.grid .row>.cell[class*=colspan]:nth-child(11):last-child,.grid .row>.cell[class*=colspan]:nth-child(3):last-child,.grid .row>.cell[class*=colspan]:nth-child(5):last-child,.grid .row>.cell[class*=colspan]:nth-child(7):last-child,.grid .row>.cell[class*=colspan]:nth-child(9):last-child,.grid .row[class*=cells]>.cell:nth-child(1):last-child,.grid .row[class*=cells]>.cell:nth-child(11):last-child,.grid .row[class*=cells]>.cell:nth-child(3):last-child,.grid .row[class*=cells]>.cell:nth-child(5):last-child,.grid .row[class*=cells]>.cell:nth-child(7):last-child,.grid .row[class*=cells]>.cell:nth-child(9):last-child,.grid .row[class*=cells]>.cell[class*=colspan]:nth-child(1):last-child,.grid .row[class*=cells]>.cell[class*=colspan]:nth-child(11):last-child,.grid .row[class*=cells]>.cell[class*=colspan]:nth-child(3):last-child,.grid .row[class*=cells]>.cell[class*=colspan]:nth-child(5):last-child,.grid .row[class*=cells]>.cell[class*=colspan]:nth-child(7):last-child,.grid .row[class*=cells]>.cell[class*=colspan]:nth-child(9):last-child{width:100%}}@media screen and (max-width:640px){.grid .row,.grid .row[class*=cells]{margin:0}.grid .row>.cell,.grid .row>.cell[class*=colspan],.grid .row[class*=cells]>.cell,.grid .row[class*=cells]>.cell[class*=colspan]{width:100%;margin:.3125rem 0}}@media screen and (max-width:800px){.grid.condensed .row,.grid.condensed .row[class*=cells]{margin:0}.grid.condensed .row>.cell,.grid.condensed .row>.cell[class*=colspan],.grid.condensed .row[class*=cells]>.cell,.grid.condensed .row[class*=cells]>.cell[class*=colspan]{width:50%;margin-bottom:10px}.grid.condensed .row>.cell:nth-child(odd),.grid.condensed .row>.cell[class*=colspan]:nth-child(odd),.grid.condensed .row[class*=cells]>.cell:nth-child(odd),.grid.condensed .row[class*=cells]>.cell[class*=colspan]:nth-child(odd){margin-left:0}.grid.condensed .row>.cell:nth-child(1):last-child,.grid.condensed .row>.cell:nth-child(11):last-child,.grid.condensed .row>.cell:nth-child(3):last-child,.grid.condensed .row>.cell:nth-child(5):last-child,.grid.condensed .row>.cell:nth-child(7):last-child,.grid.condensed .row>.cell:nth-child(9):last-child,.grid.condensed .row>.cell[class*=colspan]:nth-child(1):last-child,.grid.condensed .row>.cell[class*=colspan]:nth-child(11):last-child,.grid.condensed .row>.cell[class*=colspan]:nth-child(3):last-child,.grid.condensed .row>.cell[class*=colspan]:nth-child(5):last-child,.grid.condensed .row>.cell[class*=colspan]:nth-child(7):last-child,.grid.condensed .row>.cell[class*=colspan]:nth-child(9):last-child,.grid.condensed .row[class*=cells]>.cell:nth-child(1):last-child,.grid.condensed .row[class*=cells]>.cell:nth-child(11):last-child,.grid.condensed .row[class*=cells]>.cell:nth-child(3):last-child,.grid.condensed .row[class*=cells]>.cell:nth-child(5):last-child,.grid.condensed .row[class*=cells]>.cell:nth-child(7):last-child,.grid.condensed .row[class*=cells]>.cell:nth-child(9):last-child,.grid.condensed .row[class*=cells]>.cell[class*=colspan]:nth-child(1):last-child,.grid.condensed .row[class*=cells]>.cell[class*=colspan]:nth-child(11):last-child,.grid.condensed .row[class*=cells]>.cell[class*=colspan]:nth-child(3):last-child,.grid.condensed .row[class*=cells]>.cell[class*=colspan]:nth-child(5):last-child,.grid.condensed .row[class*=cells]>.cell[class*=colspan]:nth-child(7):last-child,.grid.condensed .row[class*=cells]>.cell[class*=colspan]:nth-child(9):last-child{width:100%}}@media only screen and (max-width:640px){.flex-grid .row{-webkit-flex-direction:column;flex-direction:column}.grid.condensed .row,.grid.condensed .row[class*=cells]{margin:0}.grid.condensed .row>.cell,.grid.condensed .row>.cell[class*=colspan],.grid.condensed .row[class*=cells]>.cell,.grid.condensed .row[class*=cells]>.cell[class*=colspan]{width:100%;margin:.3125rem 0}.f-menu{-webkit-flex-direction:column;flex-direction:column}.f-menu>li .d-menu{position:relative;box-shadow:none;left:0}}@media screen and (max-width:800px){.sidebar{width:52px}.sidebar li>a{padding-right:0;padding-left:0;width:52px!important}.sidebar li>a>.title{display:none}.sidebar li>a>.counter{position:absolute;top:0;right:4px}}@media screen and (max-width:320px){.wizard2 .step:before{width:16px}}@media screen and (max-width:800px){.tile{width:120px;height:120px}.tile.small-tile{width:56px;height:56px}.tile.wide-tile{width:248px;height:120px}.tile.wide-tile-v{width:120px;height:248px}.tile.large-tile{width:248px;height:248px}.tile.big-tile{width:376px;height:376px}.tile.super-tile{width:504px;height:504px}.tile-square{width:120px;height:120px}.tile-small{width:56px;height:56px}.tile-wide{width:248px;height:120px}.tile-large{width:248px;height:248px}.tile-big{width:376px;height:376px}.tile-super{width:504px;height:504px}.tile-small-x{width:56px}.tile-square-x{width:120px}.tile-large-x,.tile-wide-x{width:248px}.tile-big-x{width:376px}.tile-super-x{width:504px}.tile-small-y{height:56px}.tile-square-y{height:120px}.tile-large-y,.tile-wide-y{height:248px}.tile-big-y{height:376px}.tile-super-y{height:504px}.tile-content.iconic .icon{width:51.2px;height:51.2px;margin-left:-25.6px;margin-top:-32px;font-size:51.2px}.tile-small .tile-content.iconic .icon{font-size:25.6px;width:25.6px;height:25.6px;margin-left:-12.8px;margin-top:-12.8px}}@media screen and (max-width:640px){.tile-area .tile-area-title,.tile-area .tile-group .tile-group-title{display:none}.tile-area{width:100%;padding:0}.tile-area .tile-group{margin:0;padding:0;float:none}.tile-container{width:100%}}@media screen and (max-width:320px){.tile-big,.tile-super,.tile.big-tile,.tile.super-tile{width:310px}.no-small-phone{display:none!important}}@media screen and (max-width:640px){.no-phone{display:none!important}}@media screen and (max-width:800px){.no-tablet{display:none!important}}@media screen and (min-width:801px){.no-pc{display:none!important}}

data/app/assets/stylesheets/metro-rtl.css

@@ -0,0 +1,130 @@
+*[dir=ltr] {
+  direction: ltr;
+  unicode-bidi: embed;
+}
+*[dir=rtl] {
+  direction: rtl;
+  unicode-bidi: embed;
+}
+bdo[dir=ltr] {
+  direction: ltr;
+  unicode-bidi: bidi-override;
+}
+bdo[dir=rtl] {
+  direction: rtl;
+  unicode-bidi: bidi-override;
+}
+*[dir=rtl] ul,
+*[dir=rtl] ol,
+ul[dir=rtl],
+ol[dir=rtl] {
+  margin-right: .3125rem;
+  margin-left: 0;
+  padding-right: .625rem;
+}
+*[dir=rtl] ul li ul,
+*[dir=rtl] ol li ul,
+ul[dir=rtl] li ul,
+ol[dir=rtl] li ul,
+*[dir=rtl] ul li ol,
+*[dir=rtl] ol li ol,
+ul[dir=rtl] li ol,
+ol[dir=rtl] li ol {
+  padding-right: 1.5625rem;
+  padding-left: 0;
+}
+*[dir=rtl] dl dd,
+dl[dir=rtl] dd {
+  margin-right: .9375rem;
+  margin-left: 0;
+}
+*[dir=rtl] dl.horizontal dt,
+dl[dir=rtl].horizontal dt {
+  float: right;
+  width: 10rem;
+  overflow: hidden;
+  clear: left;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+*[dir=rtl] dl.horizontal dd,
+dl[dir=rtl].horizontal dd {
+  margin-right: 11.25rem;
+  margin-left: 0;
+}
+*[dir=rtl] blockquote,
+blockquote[dir=rtl] {
+  margin: .625rem 0;
+  padding: 0 .625rem 0 0;
+  border-left: none;
+  border-right: 0.25rem #999999 solid;
+}
+*[dir=rtl] .input-control.text .button,
+.input-control[dir=rtl].text .button,
+*[dir=rtl] .input-control.select .button,
+.input-control[dir=rtl].select .button,
+*[dir=rtl] .input-control.file .button,
+.input-control[dir=rtl].file .button,
+*[dir=rtl] .input-control.password .button,
+.input-control[dir=rtl].password .button,
+*[dir=rtl] .input-control.number .button,
+.input-control[dir=rtl].number .button,
+*[dir=rtl] .input-control.email .button,
+.input-control[dir=rtl].email .button,
+*[dir=rtl] .input-control.tel .button,
+.input-control[dir=rtl].tel .button,
+*[dir=rtl] .input-control.text .button-group,
+.input-control[dir=rtl].text .button-group,
+*[dir=rtl] .input-control.select .button-group,
+.input-control[dir=rtl].select .button-group,
+*[dir=rtl] .input-control.file .button-group,
+.input-control[dir=rtl].file .button-group,
+*[dir=rtl] .input-control.password .button-group,
+.input-control[dir=rtl].password .button-group,
+*[dir=rtl] .input-control.number .button-group,
+.input-control[dir=rtl].number .button-group,
+*[dir=rtl] .input-control.email .button-group,
+.input-control[dir=rtl].email .button-group,
+*[dir=rtl] .input-control.tel .button-group,
+.input-control[dir=rtl].tel .button-group {
+  right: auto;
+  left: 0;
+}
+*[dir=rtl] .input-control.text .prepend-icon,
+.input-control[dir=rtl].text .prepend-icon,
+*[dir=rtl] .input-control.select .prepend-icon,
+.input-control[dir=rtl].select .prepend-icon,
+*[dir=rtl] .input-control.file .prepend-icon,
+.input-control[dir=rtl].file .prepend-icon,
+*[dir=rtl] .input-control.password .prepend-icon,
+.input-control[dir=rtl].password .prepend-icon,
+*[dir=rtl] .input-control.number .prepend-icon,
+.input-control[dir=rtl].number .prepend-icon,
+*[dir=rtl] .input-control.email .prepend-icon,
+.input-control[dir=rtl].email .prepend-icon,
+*[dir=rtl] .input-control.tel .prepend-icon,
+.input-control[dir=rtl].tel .prepend-icon {
+  left: auto;
+  right: 4px;
+}
+*[dir=rtl] .input-control.text .prepend-icon ~ input,
+.input-control[dir=rtl].text .prepend-icon ~ input,
+*[dir=rtl] .input-control.select .prepend-icon ~ input,
+.input-control[dir=rtl].select .prepend-icon ~ input,
+*[dir=rtl] .input-control.file .prepend-icon ~ input,
+.input-control[dir=rtl].file .prepend-icon ~ input,
+*[dir=rtl] .input-control.password .prepend-icon ~ input,
+.input-control[dir=rtl].password .prepend-icon ~ input,
+*[dir=rtl] .input-control.number .prepend-icon ~ input,
+.input-control[dir=rtl].number .prepend-icon ~ input,
+*[dir=rtl] .input-control.email .prepend-icon ~ input,
+.input-control[dir=rtl].email .prepend-icon ~ input,
+*[dir=rtl] .input-control.tel .prepend-icon ~ input,
+.input-control[dir=rtl].tel .prepend-icon ~ input {
+  padding-left: 0;
+  padding-right: 30px;
+}
+*[dir=rtl] .grid .row > .cell {
+  float: right;
+}

data/app/assets/stylesheets/metro-rtl.min.css

@@ -0,0 +1 @@
+[dir=ltr],[dir=rtl]{unicode-bidi:embed}[dir=ltr],bdo[dir=ltr]{direction:ltr}bdo[dir=ltr],bdo[dir=rtl]{unicode-bidi:bidi-override}[dir=rtl]{direction:rtl}bdo[dir=rtl]{direction:rtl}[dir=rtl] ol,[dir=rtl] ul,ol[dir=rtl],ul[dir=rtl]{margin-right:.3125rem;margin-left:0;padding-right:.625rem}[dir=rtl] ol li ol,[dir=rtl] ol li ul,[dir=rtl] ul li ol,[dir=rtl] ul li ul,ol[dir=rtl] li ol,ol[dir=rtl] li ul,ul[dir=rtl] li ol,ul[dir=rtl] li ul{padding-right:1.5625rem;padding-left:0}[dir=rtl] dl dd,dl[dir=rtl] dd{margin-right:.9375rem;margin-left:0}[dir=rtl] dl.horizontal dt,dl[dir=rtl].horizontal dt{float:right;width:10rem;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}[dir=rtl] dl.horizontal dd,dl[dir=rtl].horizontal dd{margin-right:11.25rem;margin-left:0}[dir=rtl] blockquote,blockquote[dir=rtl]{margin:.625rem 0;padding:0 .625rem 0 0;border-left:none;border-right:.25rem #999 solid}.input-control[dir=rtl].email .button,.input-control[dir=rtl].email .button-group,.input-control[dir=rtl].file .button,.input-control[dir=rtl].file .button-group,.input-control[dir=rtl].number .button,.input-control[dir=rtl].number .button-group,.input-control[dir=rtl].password .button,.input-control[dir=rtl].password .button-group,.input-control[dir=rtl].select .button,.input-control[dir=rtl].select .button-group,.input-control[dir=rtl].tel .button,.input-control[dir=rtl].tel .button-group,.input-control[dir=rtl].text .button,.input-control[dir=rtl].text .button-group,[dir=rtl] .input-control.email .button,[dir=rtl] .input-control.email .button-group,[dir=rtl] .input-control.file .button,[dir=rtl] .input-control.file .button-group,[dir=rtl] .input-control.number .button,[dir=rtl] .input-control.number .button-group,[dir=rtl] .input-control.password .button,[dir=rtl] .input-control.password .button-group,[dir=rtl] .input-control.select .button,[dir=rtl] .input-control.select .button-group,[dir=rtl] .input-control.tel .button,[dir=rtl] .input-control.tel .button-group,[dir=rtl] .input-control.text .button,[dir=rtl] .input-control.text .button-group{right:auto;left:0}.input-control[dir=rtl].email .prepend-icon,.input-control[dir=rtl].file .prepend-icon,.input-control[dir=rtl].number .prepend-icon,.input-control[dir=rtl].password .prepend-icon,.input-control[dir=rtl].select .prepend-icon,.input-control[dir=rtl].tel .prepend-icon,.input-control[dir=rtl].text .prepend-icon,[dir=rtl] .input-control.email .prepend-icon,[dir=rtl] .input-control.file .prepend-icon,[dir=rtl] .input-control.number .prepend-icon,[dir=rtl] .input-control.password .prepend-icon,[dir=rtl] .input-control.select .prepend-icon,[dir=rtl] .input-control.tel .prepend-icon,[dir=rtl] .input-control.text .prepend-icon{left:auto;right:4px}.input-control[dir=rtl].email .prepend-icon~input,.input-control[dir=rtl].file .prepend-icon~input,.input-control[dir=rtl].number .prepend-icon~input,.input-control[dir=rtl].password .prepend-icon~input,.input-control[dir=rtl].select .prepend-icon~input,.input-control[dir=rtl].tel .prepend-icon~input,.input-control[dir=rtl].text .prepend-icon~input,[dir=rtl] .input-control.email .prepend-icon~input,[dir=rtl] .input-control.file .prepend-icon~input,[dir=rtl] .input-control.number .prepend-icon~input,[dir=rtl] .input-control.password .prepend-icon~input,[dir=rtl] .input-control.select .prepend-icon~input,[dir=rtl] .input-control.tel .prepend-icon~input,[dir=rtl] .input-control.text .prepend-icon~input{padding-left:0;padding-right:30px}[dir=rtl] .grid .row>.cell{float:right}

data/app/assets/stylesheets/metro-schemes.css

@@ -0,0 +1,1329 @@
+/*
+* params: name, background, backgroundHover, item, itemHover, itemDisabled, divider, dropdown-toggle
+*/
+.app-bar.pink {
+  background-color: #dc4fad;
+}
+.app-bar.pink .app-bar-element:hover,
+.app-bar.pink .app-bar-menu > li:hover,
+.app-bar.pink .app-bar-menu > li > a:hover,
+.app-bar.pink .app-bar-element:active,
+.app-bar.pink .app-bar-menu > li:active,
+.app-bar.pink .app-bar-menu > li > a:active {
+  background-color: #9a165a;
+}
+.app-bar.pink .app-bar-divider {
+  background-color: #f472d0;
+}
+.app-bar.pink .app-bar-element .d-menu,
+.app-bar.pink .app-bar-menu > li .d-menu {
+  background-color: #dc4fad;
+  border-color: transparent;
+}
+.app-bar.pink .app-bar-element .d-menu li:not(.disabled) > a,
+.app-bar.pink .app-bar-menu > li .d-menu li:not(.disabled) > a,
+.app-bar.pink .app-bar-element .d-menu li > a,
+.app-bar.pink .app-bar-menu > li .d-menu li > a {
+  background-color: #dc4fad;
+  color: #ffffff;
+}
+.app-bar.pink .app-bar-element .d-menu li:not(.disabled) > a:hover,
+.app-bar.pink .app-bar-menu > li .d-menu li:not(.disabled) > a:hover,
+.app-bar.pink .app-bar-element .d-menu li > a:hover,
+.app-bar.pink .app-bar-menu > li .d-menu li > a:hover {
+  background-color: #9a165a;
+  color: #ffffff;
+}
+.app-bar.pink .app-bar-element .d-menu li:hover > a,
+.app-bar.pink .app-bar-menu > li .d-menu li:hover > a {
+  background-color: #9a165a;
+}
+.app-bar.pink .app-bar-element .d-menu .divider,
+.app-bar.pink .app-bar-menu > li .d-menu .divider {
+  background-color: #f472d0;
+}
+.app-bar.pink .app-bar-element .d-menu .divider:hover,
+.app-bar.pink .app-bar-menu > li .d-menu .divider:hover {
+  background-color: #f472d0;
+}
+.app-bar.pink .app-bar-element .dropdown-toggle:before,
+.app-bar.pink .app-bar-menu li .dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.app-bar.pink .app-bar-element.disabled,
+.app-bar.pink .app-bar-menu li.disabled,
+.app-bar.pink .app-bar-element:disabled,
+.app-bar.pink .app-bar-menu li:disabled {
+  color: #555555;
+}
+.app-bar.pink .app-bar-element.disabled a,
+.app-bar.pink .app-bar-menu li.disabled a,
+.app-bar.pink .app-bar-element:disabled a,
+.app-bar.pink .app-bar-menu li:disabled a {
+  color: inherit !important;
+}
+.app-bar.pink .app-bar-pullbutton:hover {
+  background-color: #9a165a;
+}
+.app-bar.pink .app-bar-drop-container {
+  border: 2px solid #dc4fad;
+  background-color: #dc4fad;
+  color: #ffffff;
+}
+.app-bar.pink .app-bar-drop-container:before {
+  background-color: #dc4fad;
+  border-color: #dc4fad;
+}
+.app-bar.pink .app-bar-pullmenu .app-bar-menu {
+  border-top: 1px solid #f472d0;
+  background-color: #f472d0;
+}
+.app-bar.pink .app-bar-pullmenu .app-bar-menu li:hover {
+  background-color: #dc4fad;
+}
+.app-bar.pink .app-bar-pullmenu .app-bar-menu li:hover a {
+  background-color: #9a165a;
+  color: #ffffff;
+}
+.app-bar.darcula {
+  background-color: #3c3f41;
+}
+.app-bar.darcula .app-bar-element:hover,
+.app-bar.darcula .app-bar-menu > li:hover,
+.app-bar.darcula .app-bar-menu > li > a:hover,
+.app-bar.darcula .app-bar-element:active,
+.app-bar.darcula .app-bar-menu > li:active,
+.app-bar.darcula .app-bar-menu > li > a:active {
+  background-color: #1d1d1d;
+}
+.app-bar.darcula .app-bar-divider {
+  background-color: #616162;
+}
+.app-bar.darcula .app-bar-element .d-menu,
+.app-bar.darcula .app-bar-menu > li .d-menu {
+  background-color: #3c3f41;
+  border-color: transparent;
+}
+.app-bar.darcula .app-bar-element .d-menu li:not(.disabled) > a,
+.app-bar.darcula .app-bar-menu > li .d-menu li:not(.disabled) > a,
+.app-bar.darcula .app-bar-element .d-menu li > a,
+.app-bar.darcula .app-bar-menu > li .d-menu li > a {
+  background-color: #3c3f41;
+  color: #ffffff;
+}
+.app-bar.darcula .app-bar-element .d-menu li:not(.disabled) > a:hover,
+.app-bar.darcula .app-bar-menu > li .d-menu li:not(.disabled) > a:hover,
+.app-bar.darcula .app-bar-element .d-menu li > a:hover,
+.app-bar.darcula .app-bar-menu > li .d-menu li > a:hover {
+  background-color: #1d1d1d;
+  color: #ffffff;
+}
+.app-bar.darcula .app-bar-element .d-menu li:hover > a,
+.app-bar.darcula .app-bar-menu > li .d-menu li:hover > a {
+  background-color: #1d1d1d;
+}
+.app-bar.darcula .app-bar-element .d-menu .divider,
+.app-bar.darcula .app-bar-menu > li .d-menu .divider {
+  background-color: #616162;
+}
+.app-bar.darcula .app-bar-element .d-menu .divider:hover,
+.app-bar.darcula .app-bar-menu > li .d-menu .divider:hover {
+  background-color: #616162;
+}
+.app-bar.darcula .app-bar-element .dropdown-toggle:before,
+.app-bar.darcula .app-bar-menu li .dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.app-bar.darcula .app-bar-element.disabled,
+.app-bar.darcula .app-bar-menu li.disabled,
+.app-bar.darcula .app-bar-element:disabled,
+.app-bar.darcula .app-bar-menu li:disabled {
+  color: #555555;
+}
+.app-bar.darcula .app-bar-element.disabled a,
+.app-bar.darcula .app-bar-menu li.disabled a,
+.app-bar.darcula .app-bar-element:disabled a,
+.app-bar.darcula .app-bar-menu li:disabled a {
+  color: inherit !important;
+}
+.app-bar.darcula .app-bar-pullbutton:hover {
+  background-color: #1d1d1d;
+}
+.app-bar.darcula .app-bar-drop-container {
+  border: 2px solid #3c3f41;
+  background-color: #3c3f41;
+  color: #ffffff;
+}
+.app-bar.darcula .app-bar-drop-container:before {
+  background-color: #3c3f41;
+  border-color: #3c3f41;
+}
+.app-bar.darcula .app-bar-pullmenu .app-bar-menu {
+  border-top: 1px solid #616162;
+  background-color: #616162;
+}
+.app-bar.darcula .app-bar-pullmenu .app-bar-menu li:hover {
+  background-color: #3c3f41;
+}
+.app-bar.darcula .app-bar-pullmenu .app-bar-menu li:hover a {
+  background-color: #1d1d1d;
+  color: #ffffff;
+}
+.app-bar.navy {
+  background-color: #0072c6;
+}
+.app-bar.navy .app-bar-element:hover,
+.app-bar.navy .app-bar-menu > li:hover,
+.app-bar.navy .app-bar-menu > li > a:hover,
+.app-bar.navy .app-bar-element:active,
+.app-bar.navy .app-bar-menu > li:active,
+.app-bar.navy .app-bar-menu > li > a:active {
+  background-color: #005696;
+}
+.app-bar.navy .app-bar-divider {
+  background-color: #4c9cd7;
+}
+.app-bar.navy .app-bar-element .d-menu,
+.app-bar.navy .app-bar-menu > li .d-menu {
+  background-color: #0072c6;
+  border-color: transparent;
+}
+.app-bar.navy .app-bar-element .d-menu li:not(.disabled) > a,
+.app-bar.navy .app-bar-menu > li .d-menu li:not(.disabled) > a,
+.app-bar.navy .app-bar-element .d-menu li > a,
+.app-bar.navy .app-bar-menu > li .d-menu li > a {
+  background-color: #0072c6;
+  color: #ffffff;
+}
+.app-bar.navy .app-bar-element .d-menu li:not(.disabled) > a:hover,
+.app-bar.navy .app-bar-menu > li .d-menu li:not(.disabled) > a:hover,
+.app-bar.navy .app-bar-element .d-menu li > a:hover,
+.app-bar.navy .app-bar-menu > li .d-menu li > a:hover {
+  background-color: #005696;
+  color: #ffffff;
+}
+.app-bar.navy .app-bar-element .d-menu li:hover > a,
+.app-bar.navy .app-bar-menu > li .d-menu li:hover > a {
+  background-color: #005696;
+}
+.app-bar.navy .app-bar-element .d-menu .divider,
+.app-bar.navy .app-bar-menu > li .d-menu .divider {
+  background-color: #4c9cd7;
+}
+.app-bar.navy .app-bar-element .d-menu .divider:hover,
+.app-bar.navy .app-bar-menu > li .d-menu .divider:hover {
+  background-color: #4c9cd7;
+}
+.app-bar.navy .app-bar-element .dropdown-toggle:before,
+.app-bar.navy .app-bar-menu li .dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.app-bar.navy .app-bar-element.disabled,
+.app-bar.navy .app-bar-menu li.disabled,
+.app-bar.navy .app-bar-element:disabled,
+.app-bar.navy .app-bar-menu li:disabled {
+  color: #555555;
+}
+.app-bar.navy .app-bar-element.disabled a,
+.app-bar.navy .app-bar-menu li.disabled a,
+.app-bar.navy .app-bar-element:disabled a,
+.app-bar.navy .app-bar-menu li:disabled a {
+  color: inherit !important;
+}
+.app-bar.navy .app-bar-pullbutton:hover {
+  background-color: #005696;
+}
+.app-bar.navy .app-bar-drop-container {
+  border: 2px solid #0072c6;
+  background-color: #0072c6;
+  color: #ffffff;
+}
+.app-bar.navy .app-bar-drop-container:before {
+  background-color: #0072c6;
+  border-color: #0072c6;
+}
+.app-bar.navy .app-bar-pullmenu .app-bar-menu {
+  border-top: 1px solid #4c9cd7;
+  background-color: #4c9cd7;
+}
+.app-bar.navy .app-bar-pullmenu .app-bar-menu li:hover {
+  background-color: #0072c6;
+}
+.app-bar.navy .app-bar-pullmenu .app-bar-menu li:hover a {
+  background-color: #005696;
+  color: #ffffff;
+}
+.app-bar.red {
+  background-color: #ce352c;
+}
+.app-bar.red .app-bar-element:hover,
+.app-bar.red .app-bar-menu > li:hover,
+.app-bar.red .app-bar-menu > li > a:hover,
+.app-bar.red .app-bar-element:active,
+.app-bar.red .app-bar-menu > li:active,
+.app-bar.red .app-bar-menu > li > a:active {
+  background-color: #9a1616;
+}
+.app-bar.red .app-bar-divider {
+  background-color: #da5a53;
+}
+.app-bar.red .app-bar-element .d-menu,
+.app-bar.red .app-bar-menu > li .d-menu {
+  background-color: #ce352c;
+  border-color: transparent;
+}
+.app-bar.red .app-bar-element .d-menu li:not(.disabled) > a,
+.app-bar.red .app-bar-menu > li .d-menu li:not(.disabled) > a,
+.app-bar.red .app-bar-element .d-menu li > a,
+.app-bar.red .app-bar-menu > li .d-menu li > a {
+  background-color: #ce352c;
+  color: #ffffff;
+}
+.app-bar.red .app-bar-element .d-menu li:not(.disabled) > a:hover,
+.app-bar.red .app-bar-menu > li .d-menu li:not(.disabled) > a:hover,
+.app-bar.red .app-bar-element .d-menu li > a:hover,
+.app-bar.red .app-bar-menu > li .d-menu li > a:hover {
+  background-color: #9a1616;
+  color: #ffffff;
+}
+.app-bar.red .app-bar-element .d-menu li:hover > a,
+.app-bar.red .app-bar-menu > li .d-menu li:hover > a {
+  background-color: #9a1616;
+}
+.app-bar.red .app-bar-element .d-menu .divider,
+.app-bar.red .app-bar-menu > li .d-menu .divider {
+  background-color: #da5a53;
+}
+.app-bar.red .app-bar-element .d-menu .divider:hover,
+.app-bar.red .app-bar-menu > li .d-menu .divider:hover {
+  background-color: #da5a53;
+}
+.app-bar.red .app-bar-element .dropdown-toggle:before,
+.app-bar.red .app-bar-menu li .dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.app-bar.red .app-bar-element.disabled,
+.app-bar.red .app-bar-menu li.disabled,
+.app-bar.red .app-bar-element:disabled,
+.app-bar.red .app-bar-menu li:disabled {
+  color: #555555;
+}
+.app-bar.red .app-bar-element.disabled a,
+.app-bar.red .app-bar-menu li.disabled a,
+.app-bar.red .app-bar-element:disabled a,
+.app-bar.red .app-bar-menu li:disabled a {
+  color: inherit !important;
+}
+.app-bar.red .app-bar-pullbutton:hover {
+  background-color: #9a1616;
+}
+.app-bar.red .app-bar-drop-container {
+  border: 2px solid #ce352c;
+  background-color: #ce352c;
+  color: #ffffff;
+}
+.app-bar.red .app-bar-drop-container:before {
+  background-color: #ce352c;
+  border-color: #ce352c;
+}
+.app-bar.red .app-bar-pullmenu .app-bar-menu {
+  border-top: 1px solid #da5a53;
+  background-color: #da5a53;
+}
+.app-bar.red .app-bar-pullmenu .app-bar-menu li:hover {
+  background-color: #ce352c;
+}
+.app-bar.red .app-bar-pullmenu .app-bar-menu li:hover a {
+  background-color: #9a1616;
+  color: #ffffff;
+}
+.app-bar.green {
+  background-color: #60a917;
+}
+.app-bar.green .app-bar-element:hover,
+.app-bar.green .app-bar-menu > li:hover,
+.app-bar.green .app-bar-menu > li > a:hover,
+.app-bar.green .app-bar-element:active,
+.app-bar.green .app-bar-menu > li:active,
+.app-bar.green .app-bar-menu > li > a:active {
+  background-color: #128023;
+}
+.app-bar.green .app-bar-divider {
+  background-color: #7ad61d;
+}
+.app-bar.green .app-bar-element .d-menu,
+.app-bar.green .app-bar-menu > li .d-menu {
+  background-color: #60a917;
+  border-color: transparent;
+}
+.app-bar.green .app-bar-element .d-menu li:not(.disabled) > a,
+.app-bar.green .app-bar-menu > li .d-menu li:not(.disabled) > a,
+.app-bar.green .app-bar-element .d-menu li > a,
+.app-bar.green .app-bar-menu > li .d-menu li > a {
+  background-color: #60a917;
+  color: #ffffff;
+}
+.app-bar.green .app-bar-element .d-menu li:not(.disabled) > a:hover,
+.app-bar.green .app-bar-menu > li .d-menu li:not(.disabled) > a:hover,
+.app-bar.green .app-bar-element .d-menu li > a:hover,
+.app-bar.green .app-bar-menu > li .d-menu li > a:hover {
+  background-color: #128023;
+  color: #ffffff;
+}
+.app-bar.green .app-bar-element .d-menu li:hover > a,
+.app-bar.green .app-bar-menu > li .d-menu li:hover > a {
+  background-color: #128023;
+}
+.app-bar.green .app-bar-element .d-menu .divider,
+.app-bar.green .app-bar-menu > li .d-menu .divider {
+  background-color: #7ad61d;
+}
+.app-bar.green .app-bar-element .d-menu .divider:hover,
+.app-bar.green .app-bar-menu > li .d-menu .divider:hover {
+  background-color: #7ad61d;
+}
+.app-bar.green .app-bar-element .dropdown-toggle:before,
+.app-bar.green .app-bar-menu li .dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.app-bar.green .app-bar-element.disabled,
+.app-bar.green .app-bar-menu li.disabled,
+.app-bar.green .app-bar-element:disabled,
+.app-bar.green .app-bar-menu li:disabled {
+  color: #555555;
+}
+.app-bar.green .app-bar-element.disabled a,
+.app-bar.green .app-bar-menu li.disabled a,
+.app-bar.green .app-bar-element:disabled a,
+.app-bar.green .app-bar-menu li:disabled a {
+  color: inherit !important;
+}
+.app-bar.green .app-bar-pullbutton:hover {
+  background-color: #128023;
+}
+.app-bar.green .app-bar-drop-container {
+  border: 2px solid #60a917;
+  background-color: #60a917;
+  color: #ffffff;
+}
+.app-bar.green .app-bar-drop-container:before {
+  background-color: #60a917;
+  border-color: #60a917;
+}
+.app-bar.green .app-bar-pullmenu .app-bar-menu {
+  border-top: 1px solid #7ad61d;
+  background-color: #7ad61d;
+}
+.app-bar.green .app-bar-pullmenu .app-bar-menu li:hover {
+  background-color: #60a917;
+}
+.app-bar.green .app-bar-pullmenu .app-bar-menu li:hover a {
+  background-color: #128023;
+  color: #ffffff;
+}
+.app-bar.orange {
+  background-color: #fa6800;
+}
+.app-bar.orange .app-bar-element:hover,
+.app-bar.orange .app-bar-menu > li:hover,
+.app-bar.orange .app-bar-menu > li > a:hover,
+.app-bar.orange .app-bar-element:active,
+.app-bar.orange .app-bar-menu > li:active,
+.app-bar.orange .app-bar-menu > li > a:active {
+  background-color: #bf5a15;
+}
+.app-bar.orange .app-bar-divider {
+  background-color: #ffc194;
+}
+.app-bar.orange .app-bar-element .d-menu,
+.app-bar.orange .app-bar-menu > li .d-menu {
+  background-color: #fa6800;
+  border-color: transparent;
+}
+.app-bar.orange .app-bar-element .d-menu li:not(.disabled) > a,
+.app-bar.orange .app-bar-menu > li .d-menu li:not(.disabled) > a,
+.app-bar.orange .app-bar-element .d-menu li > a,
+.app-bar.orange .app-bar-menu > li .d-menu li > a {
+  background-color: #fa6800;
+  color: #ffffff;
+}
+.app-bar.orange .app-bar-element .d-menu li:not(.disabled) > a:hover,
+.app-bar.orange .app-bar-menu > li .d-menu li:not(.disabled) > a:hover,
+.app-bar.orange .app-bar-element .d-menu li > a:hover,
+.app-bar.orange .app-bar-menu > li .d-menu li > a:hover {
+  background-color: #bf5a15;
+  color: #ffffff;
+}
+.app-bar.orange .app-bar-element .d-menu li:hover > a,
+.app-bar.orange .app-bar-menu > li .d-menu li:hover > a {
+  background-color: #bf5a15;
+}
+.app-bar.orange .app-bar-element .d-menu .divider,
+.app-bar.orange .app-bar-menu > li .d-menu .divider {
+  background-color: #ffc194;
+}
+.app-bar.orange .app-bar-element .d-menu .divider:hover,
+.app-bar.orange .app-bar-menu > li .d-menu .divider:hover {
+  background-color: #ffc194;
+}
+.app-bar.orange .app-bar-element .dropdown-toggle:before,
+.app-bar.orange .app-bar-menu li .dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.app-bar.orange .app-bar-element.disabled,
+.app-bar.orange .app-bar-menu li.disabled,
+.app-bar.orange .app-bar-element:disabled,
+.app-bar.orange .app-bar-menu li:disabled {
+  color: #555555;
+}
+.app-bar.orange .app-bar-element.disabled a,
+.app-bar.orange .app-bar-menu li.disabled a,
+.app-bar.orange .app-bar-element:disabled a,
+.app-bar.orange .app-bar-menu li:disabled a {
+  color: inherit !important;
+}
+.app-bar.orange .app-bar-pullbutton:hover {
+  background-color: #bf5a15;
+}
+.app-bar.orange .app-bar-drop-container {
+  border: 2px solid #fa6800;
+  background-color: #fa6800;
+  color: #ffffff;
+}
+.app-bar.orange .app-bar-drop-container:before {
+  background-color: #fa6800;
+  border-color: #fa6800;
+}
+.app-bar.orange .app-bar-pullmenu .app-bar-menu {
+  border-top: 1px solid #ffc194;
+  background-color: #ffc194;
+}
+.app-bar.orange .app-bar-pullmenu .app-bar-menu li:hover {
+  background-color: #fa6800;
+}
+.app-bar.orange .app-bar-pullmenu .app-bar-menu li:hover a {
+  background-color: #bf5a15;
+  color: #ffffff;
+}
+/*
+* params: name, background, backgroundHover, item, itemHover, itemDisabled, divider, dropdown-toggle
+*/
+.v-menu.darcula,
+.d-menu.darcula {
+  background: #3c3f41;
+}
+.v-menu.darcula li > a,
+.d-menu.darcula li > a {
+  background: #3c3f41;
+  color: #ffffff;
+}
+.v-menu.darcula li > a .icon,
+.d-menu.darcula li > a .icon {
+  color: #cccccc;
+}
+.v-menu.darcula li > a:hover,
+.d-menu.darcula li > a:hover {
+  background: #1d1d1d;
+  color: #ffffff;
+}
+.v-menu.darcula li > a:hover .icon,
+.d-menu.darcula li > a:hover .icon {
+  color: #ffffff;
+}
+.v-menu.darcula li > .item-block,
+.d-menu.darcula li > .item-block {
+  background: #484c4e;
+}
+.v-menu.darcula li.disabled > a,
+.d-menu.darcula li.disabled > a {
+  background: #3c3f41;
+  color: #555555;
+}
+.v-menu.darcula li > a.dropdown-toggle:before,
+.d-menu.darcula li > a.dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.v-menu.darcula li.menu-title,
+.d-menu.darcula li.menu-title {
+  background: #303234;
+  color: #cccccc;
+}
+.v-menu.darcula li.divider,
+.d-menu.darcula li.divider {
+  background: #616162;
+}
+.v-menu.pink,
+.d-menu.pink {
+  background: #dc4fad;
+}
+.v-menu.pink li > a,
+.d-menu.pink li > a {
+  background: #dc4fad;
+  color: #ffffff;
+}
+.v-menu.pink li > a .icon,
+.d-menu.pink li > a .icon {
+  color: #cccccc;
+}
+.v-menu.pink li > a:hover,
+.d-menu.pink li > a:hover {
+  background: #9a165a;
+  color: #ffffff;
+}
+.v-menu.pink li > a:hover .icon,
+.d-menu.pink li > a:hover .icon {
+  color: #ffffff;
+}
+.v-menu.pink li > .item-block,
+.d-menu.pink li > .item-block {
+  background: #e064b7;
+}
+.v-menu.pink li.disabled > a,
+.d-menu.pink li.disabled > a {
+  background: #dc4fad;
+  color: #555555;
+}
+.v-menu.pink li > a.dropdown-toggle:before,
+.d-menu.pink li > a.dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.v-menu.pink li.menu-title,
+.d-menu.pink li.menu-title {
+  background: #d83aa3;
+  color: #cccccc;
+}
+.v-menu.pink li.divider,
+.d-menu.pink li.divider {
+  background: #f472d0;
+}
+.v-menu.navy,
+.d-menu.navy {
+  background: #0072c6;
+}
+.v-menu.navy li > a,
+.d-menu.navy li > a {
+  background: #0072c6;
+  color: #ffffff;
+}
+.v-menu.navy li > a .icon,
+.d-menu.navy li > a .icon {
+  color: #cccccc;
+}
+.v-menu.navy li > a:hover,
+.d-menu.navy li > a:hover {
+  background: #005696;
+  color: #ffffff;
+}
+.v-menu.navy li > a:hover .icon,
+.d-menu.navy li > a:hover .icon {
+  color: #ffffff;
+}
+.v-menu.navy li > .item-block,
+.d-menu.navy li > .item-block {
+  background: #0081e0;
+}
+.v-menu.navy li.disabled > a,
+.d-menu.navy li.disabled > a {
+  background: #0072c6;
+  color: #555555;
+}
+.v-menu.navy li > a.dropdown-toggle:before,
+.d-menu.navy li > a.dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.v-menu.navy li.menu-title,
+.d-menu.navy li.menu-title {
+  background: #0063ad;
+  color: #cccccc;
+}
+.v-menu.navy li.divider,
+.d-menu.navy li.divider {
+  background: #4c9cd7;
+}
+.v-menu.red,
+.d-menu.red {
+  background: #ce352c;
+}
+.v-menu.red li > a,
+.d-menu.red li > a {
+  background: #ce352c;
+  color: #ffffff;
+}
+.v-menu.red li > a .icon,
+.d-menu.red li > a .icon {
+  color: #cccccc;
+}
+.v-menu.red li > a:hover,
+.d-menu.red li > a:hover {
+  background: #9a1616;
+  color: #ffffff;
+}
+.v-menu.red li > a:hover .icon,
+.d-menu.red li > a:hover .icon {
+  color: #ffffff;
+}
+.v-menu.red li > .item-block,
+.d-menu.red li > .item-block {
+  background: #d6463e;
+}
+.v-menu.red li.disabled > a,
+.d-menu.red li.disabled > a {
+  background: #ce352c;
+  color: #555555;
+}
+.v-menu.red li > a.dropdown-toggle:before,
+.d-menu.red li > a.dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.v-menu.red li.menu-title,
+.d-menu.red li.menu-title {
+  background: #b93028;
+  color: #cccccc;
+}
+.v-menu.red li.divider,
+.d-menu.red li.divider {
+  background: #da5a53;
+}
+.v-menu.green,
+.d-menu.green {
+  background: #60a917;
+}
+.v-menu.green li > a,
+.d-menu.green li > a {
+  background: #60a917;
+  color: #ffffff;
+}
+.v-menu.green li > a .icon,
+.d-menu.green li > a .icon {
+  color: #cccccc;
+}
+.v-menu.green li > a:hover,
+.d-menu.green li > a:hover {
+  background: #128023;
+  color: #ffffff;
+}
+.v-menu.green li > a:hover .icon,
+.d-menu.green li > a:hover .icon {
+  color: #ffffff;
+}
+.v-menu.green li > .item-block,
+.d-menu.green li > .item-block {
+  background: #6dbf1a;
+}
+.v-menu.green li.disabled > a,
+.d-menu.green li.disabled > a {
+  background: #60a917;
+  color: #555555;
+}
+.v-menu.green li > a.dropdown-toggle:before,
+.d-menu.green li > a.dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.v-menu.green li.menu-title,
+.d-menu.green li.menu-title {
+  background: #539314;
+  color: #cccccc;
+}
+.v-menu.green li.divider,
+.d-menu.green li.divider {
+  background: #7ad61d;
+}
+.v-menu.orange,
+.d-menu.orange {
+  background: #fa6800;
+}
+.v-menu.orange li > a,
+.d-menu.orange li > a {
+  background: #fa6800;
+  color: #ffffff;
+}
+.v-menu.orange li > a .icon,
+.d-menu.orange li > a .icon {
+  color: #cccccc;
+}
+.v-menu.orange li > a:hover,
+.d-menu.orange li > a:hover {
+  background: #bf5a15;
+  color: #ffffff;
+}
+.v-menu.orange li > a:hover .icon,
+.d-menu.orange li > a:hover .icon {
+  color: #ffffff;
+}
+.v-menu.orange li > .item-block,
+.d-menu.orange li > .item-block {
+  background: #ff7615;
+}
+.v-menu.orange li.disabled > a,
+.d-menu.orange li.disabled > a {
+  background: #fa6800;
+  color: #555555;
+}
+.v-menu.orange li > a.dropdown-toggle:before,
+.d-menu.orange li > a.dropdown-toggle:before {
+  border-color: #ffffff;
+}
+.v-menu.orange li.menu-title,
+.d-menu.orange li.menu-title {
+  background: #e15d00;
+  color: #cccccc;
+}
+.v-menu.orange li.divider,
+.d-menu.orange li.divider {
+  background: #ffc194;
+}
+/*
+* params: name, background, backgroundHover, item, itemHover, itemDisabled, divider, dropdown-toggle
+*/
+.t-menu.darcula {
+  background-color: #3c3f41;
+}
+.t-menu.darcula .t-menu {
+  background-color: #3c3f41;
+}
+.t-menu.darcula li > a {
+  background: #3c3f41;
+  color: #ffffff;
+  border-bottom-color: #616162;
+}
+.t-menu.darcula li > a.dropdown-toggle:after,
+.t-menu.darcula li > a.dropdown-toggle:hover:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.darcula li:hover > a {
+  background: #1d1d1d;
+  color: #ffffff;
+}
+.t-menu.darcula li:hover > a.dropdown-toggle:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.darcula li.disabled > a {
+  background: #3c3f41;
+  color: #555555;
+}
+.t-menu.darcula li.disabled > a:hover {
+  background: #3c3f41;
+}
+.t-menu.darcula.horizontal > li > a,
+.t-menu.darcula .horizontal > li > a {
+  border-right-color: #616162;
+}
+.t-menu.pink {
+  background-color: #dc4fad;
+}
+.t-menu.pink .t-menu {
+  background-color: #dc4fad;
+}
+.t-menu.pink li > a {
+  background: #dc4fad;
+  color: #ffffff;
+  border-bottom-color: #f472d0;
+}
+.t-menu.pink li > a.dropdown-toggle:after,
+.t-menu.pink li > a.dropdown-toggle:hover:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.pink li:hover > a {
+  background: #9a165a;
+  color: #ffffff;
+}
+.t-menu.pink li:hover > a.dropdown-toggle:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.pink li.disabled > a {
+  background: #dc4fad;
+  color: #555555;
+}
+.t-menu.pink li.disabled > a:hover {
+  background: #dc4fad;
+}
+.t-menu.pink.horizontal > li > a,
+.t-menu.pink .horizontal > li > a {
+  border-right-color: #f472d0;
+}
+.t-menu.navy {
+  background-color: #0072c6;
+}
+.t-menu.navy .t-menu {
+  background-color: #0072c6;
+}
+.t-menu.navy li > a {
+  background: #0072c6;
+  color: #ffffff;
+  border-bottom-color: #4c9cd7;
+}
+.t-menu.navy li > a.dropdown-toggle:after,
+.t-menu.navy li > a.dropdown-toggle:hover:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.navy li:hover > a {
+  background: #005696;
+  color: #ffffff;
+}
+.t-menu.navy li:hover > a.dropdown-toggle:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.navy li.disabled > a {
+  background: #0072c6;
+  color: #555555;
+}
+.t-menu.navy li.disabled > a:hover {
+  background: #0072c6;
+}
+.t-menu.navy.horizontal > li > a,
+.t-menu.navy .horizontal > li > a {
+  border-right-color: #4c9cd7;
+}
+.t-menu.red {
+  background-color: #ce352c;
+}
+.t-menu.red .t-menu {
+  background-color: #ce352c;
+}
+.t-menu.red li > a {
+  background: #ce352c;
+  color: #ffffff;
+  border-bottom-color: #da5a53;
+}
+.t-menu.red li > a.dropdown-toggle:after,
+.t-menu.red li > a.dropdown-toggle:hover:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.red li:hover > a {
+  background: #9a1616;
+  color: #ffffff;
+}
+.t-menu.red li:hover > a.dropdown-toggle:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.red li.disabled > a {
+  background: #ce352c;
+  color: #555555;
+}
+.t-menu.red li.disabled > a:hover {
+  background: #ce352c;
+}
+.t-menu.red.horizontal > li > a,
+.t-menu.red .horizontal > li > a {
+  border-right-color: #da5a53;
+}
+.t-menu.green {
+  background-color: #60a917;
+}
+.t-menu.green .t-menu {
+  background-color: #60a917;
+}
+.t-menu.green li > a {
+  background: #60a917;
+  color: #ffffff;
+  border-bottom-color: #7ad61d;
+}
+.t-menu.green li > a.dropdown-toggle:after,
+.t-menu.green li > a.dropdown-toggle:hover:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.green li:hover > a {
+  background: #128023;
+  color: #ffffff;
+}
+.t-menu.green li:hover > a.dropdown-toggle:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.green li.disabled > a {
+  background: #60a917;
+  color: #555555;
+}
+.t-menu.green li.disabled > a:hover {
+  background: #60a917;
+}
+.t-menu.green.horizontal > li > a,
+.t-menu.green .horizontal > li > a {
+  border-right-color: #7ad61d;
+}
+.t-menu.orange {
+  background-color: #fa6800;
+}
+.t-menu.orange .t-menu {
+  background-color: #fa6800;
+}
+.t-menu.orange li > a {
+  background: #fa6800;
+  color: #ffffff;
+  border-bottom-color: #ffc194;
+}
+.t-menu.orange li > a.dropdown-toggle:after,
+.t-menu.orange li > a.dropdown-toggle:hover:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.orange li:hover > a {
+  background: #bf5a15;
+  color: #ffffff;
+}
+.t-menu.orange li:hover > a.dropdown-toggle:after {
+  border-color: transparent transparent #ffffff;
+}
+.t-menu.orange li.disabled > a {
+  background: #fa6800;
+  color: #555555;
+}
+.t-menu.orange li.disabled > a:hover {
+  background: #fa6800;
+}
+.t-menu.orange.horizontal > li > a,
+.t-menu.orange .horizontal > li > a {
+  border-right-color: #ffc194;
+}
+/*
+* params: name, background, backgroundHover, backgroundActive, item, itemHover, itemActive, itemDisabled
+*/
+.sidebar.darcula {
+  background: #3c3f41;
+}
+.sidebar.darcula li > a {
+  background: #3c3f41;
+  color: #ffffff;
+}
+.sidebar.darcula li:hover > a {
+  background: #4d5154;
+  color: #ffffff;
+}
+.sidebar.darcula li.active > a {
+  background: #1d1d1d;
+  color: #ffffff;
+}
+.sidebar.darcula li.disabled > a {
+  background: #3c3f41;
+  color: #555555;
+}
+.sidebar.pink {
+  background: #dc4fad;
+}
+.sidebar.pink li > a {
+  background: #dc4fad;
+  color: #ffffff;
+}
+.sidebar.pink li:hover > a {
+  background: #b91a6c;
+  color: #ffffff;
+}
+.sidebar.pink li.active > a {
+  background: #9a165a;
+  color: #ffffff;
+}
+.sidebar.pink li.disabled > a {
+  background: #dc4fad;
+  color: #555555;
+}
+.sidebar.navy {
+  background: #0072c6;
+}
+.sidebar.navy li > a {
+  background: #0072c6;
+  color: #ffffff;
+}
+.sidebar.navy li:hover > a {
+  background: #006aba;
+  color: #ffffff;
+}
+.sidebar.navy li.active > a {
+  background: #005696;
+  color: #ffffff;
+}
+.sidebar.navy li.disabled > a {
+  background: #0072c6;
+  color: #555555;
+}
+.sidebar.red {
+  background: #ce352c;
+}
+.sidebar.red li > a {
+  background: #ce352c;
+  color: #ffffff;
+}
+.sidebar.red li:hover > a {
+  background: #b91a1a;
+  color: #ffffff;
+}
+.sidebar.red li.active > a {
+  background: #9a1616;
+  color: #ffffff;
+}
+.sidebar.red li.disabled > a {
+  background: #ce352c;
+  color: #555555;
+}
+.sidebar.green {
+  background: #60a917;
+}
+.sidebar.green li > a {
+  background: #60a917;
+  color: #ffffff;
+}
+.sidebar.green li:hover > a {
+  background: #169f2c;
+  color: #ffffff;
+}
+.sidebar.green li.active > a {
+  background: #128023;
+  color: #ffffff;
+}
+.sidebar.green li.disabled > a {
+  background: #60a917;
+  color: #555555;
+}
+.sidebar.orange {
+  background: #fa6800;
+}
+.sidebar.orange li > a {
+  background: #fa6800;
+  color: #ffffff;
+}
+.sidebar.orange li:hover > a {
+  background: #df6919;
+  color: #ffffff;
+}
+.sidebar.orange li.active > a {
+  background: #bf5a15;
+  color: #ffffff;
+}
+.sidebar.orange li.disabled > a {
+  background: #fa6800;
+  color: #555555;
+}
+/*
+* params: name, background, backgroundHover, backgroundActive, item, itemHover, itemActive, itemDisabled
+*/
+.calendar.darcula {
+  background: #3c3f41;
+}
+.calendar.darcula a {
+  color: #ffffff;
+}
+.calendar.darcula a:hover {
+  background: #4d5154;
+  color: #ffffff;
+}
+.calendar.darcula .calendar-header {
+  background: #3c3f41;
+}
+.calendar.darcula .today a {
+  background-color: #fa6800;
+}
+.calendar.darcula .day,
+.calendar.darcula .month,
+.calendar.darcula .year {
+  border-color: #4d5154;
+}
+.calendar.darcula .other-day {
+  background: #555555;
+  border-color: #555555;
+}
+.calendar.darcula .day-of-week {
+  color: #ffffff;
+}
+.calendar.darcula .calendar-actions .calendar-btn-today {
+  background: #1d1d1d;
+  border-color: #1d1d1d;
+}
+.calendar.darcula .calendar-actions .calendar-btn-today:active {
+  background: #030303;
+}
+.calendar.darcula .calendar-actions .calendar-btn-clear {
+  background: transparent;
+  border-color: transparent;
+}
+.calendar.pink {
+  background: #dc4fad;
+}
+.calendar.pink a {
+  color: #ffffff;
+}
+.calendar.pink a:hover {
+  background: #b91a6c;
+  color: #ffffff;
+}
+.calendar.pink .calendar-header {
+  background: #dc4fad;
+}
+.calendar.pink .today a {
+  background-color: #fa6800;
+}
+.calendar.pink .day,
+.calendar.pink .month,
+.calendar.pink .year {
+  border-color: #b91a6c;
+}
+.calendar.pink .other-day {
+  background: #f472d0;
+  border-color: #f472d0;
+}
+.calendar.pink .day-of-week {
+  color: #ffffff;
+}
+.calendar.pink .calendar-actions .calendar-btn-today {
+  background: #9a165a;
+  border-color: #9a165a;
+}
+.calendar.pink .calendar-actions .calendar-btn-today:active {
+  background: #6d1040;
+}
+.calendar.pink .calendar-actions .calendar-btn-clear {
+  background: transparent;
+  border-color: transparent;
+}
+.calendar.navy {
+  background: #0072c6;
+}
+.calendar.navy a {
+  color: #ffffff;
+}
+.calendar.navy a:hover {
+  background: #006aba;
+  color: #ffffff;
+}
+.calendar.navy .calendar-header {
+  background: #0072c6;
+}
+.calendar.navy .today a {
+  background-color: #fa6800;
+}
+.calendar.navy .day,
+.calendar.navy .month,
+.calendar.navy .year {
+  border-color: #006aba;
+}
+.calendar.navy .other-day {
+  background: #59cde2;
+  border-color: #59cde2;
+}
+.calendar.navy .day-of-week {
+  color: #ffffff;
+}
+.calendar.navy .calendar-actions .calendar-btn-today {
+  background: #16499a;
+  border-color: #16499a;
+}
+.calendar.navy .calendar-actions .calendar-btn-today:active {
+  background: #10346d;
+}
+.calendar.navy .calendar-actions .calendar-btn-clear {
+  background: transparent;
+  border-color: transparent;
+}
+.calendar.red {
+  background: #ce352c;
+}
+.calendar.red a {
+  color: #ffffff;
+}
+.calendar.red a:hover {
+  background: #b91a1a;
+  color: #ffffff;
+}
+.calendar.red .calendar-header {
+  background: #ce352c;
+}
+.calendar.red .today a {
+  background-color: #fa6800;
+}
+.calendar.red .day,
+.calendar.red .month,
+.calendar.red .year {
+  border-color: #b91a1a;
+}
+.calendar.red .other-day {
+  background: #da5a53;
+  border-color: #da5a53;
+}
+.calendar.red .day-of-week {
+  color: #ffffff;
+}
+.calendar.red .calendar-actions .calendar-btn-today {
+  background: #9a1616;
+  border-color: #9a1616;
+}
+.calendar.red .calendar-actions .calendar-btn-today:active {
+  background: #6d1010;
+}
+.calendar.red .calendar-actions .calendar-btn-clear {
+  background: transparent;
+  border-color: transparent;
+}
+.calendar.green {
+  background: #60a917;
+}
+.calendar.green a {
+  color: #ffffff;
+}
+.calendar.green a:hover {
+  background: #169f2c;
+  color: #ffffff;
+}
+.calendar.green .calendar-header {
+  background: #60a917;
+}
+.calendar.green .today a {
+  background-color: #fa6800;
+}
+.calendar.green .day,
+.calendar.green .month,
+.calendar.green .year {
+  border-color: #169f2c;
+}
+.calendar.green .other-day {
+  background: #7ad61d;
+  border-color: #7ad61d;
+}
+.calendar.green .day-of-week {
+  color: #ffffff;
+}
+.calendar.green .calendar-actions .calendar-btn-today {
+  background: #128023;
+  border-color: #128023;
+}
+.calendar.green .calendar-actions .calendar-btn-today:active {
+  background: #0c5317;
+}
+.calendar.green .calendar-actions .calendar-btn-clear {
+  background: transparent;
+  border-color: transparent;
+}
+.calendar.orange {
+  background: #fa6800;
+}
+.calendar.orange a {
+  color: #ffffff;
+}
+.calendar.orange a:hover {
+  background: #df6919;
+  color: #ffffff;
+}
+.calendar.orange .calendar-header {
+  background: #fa6800;
+}
+.calendar.orange .today a {
+  background-color: #fa6800;
+}
+.calendar.orange .day,
+.calendar.orange .month,
+.calendar.orange .year {
+  border-color: #df6919;
+}
+.calendar.orange .other-day {
+  background: #ffc194;
+  border-color: #ffc194;
+}
+.calendar.orange .day-of-week {
+  color: #ffffff;
+}
+.calendar.orange .calendar-actions .calendar-btn-today {
+  background: #bf5a15;
+  border-color: #bf5a15;
+}
+.calendar.orange .calendar-actions .calendar-btn-today:active {
+  background: #914410;
+}
+.calendar.orange .calendar-actions .calendar-btn-clear {
+  background: transparent;
+  border-color: transparent;
+}