added new lightblue color (legacy blue)

build/scss/_variables.scss

@@ -5,6 +5,7 @@
 // COLORS
 // --------------------------------------------------------
 $blue: #0073b7 !default;
+$lightblue: #3c8dbc !default;
 $navy: #001f3f !default;
 $teal: #39cccc !default;
 $olive: #3d9970 !default;
@@ -17,6 +18,7 @@ $black: #111 !default;
 $gray-x-light: #d2d6de !default;
 
 $colors: map-merge((
+    'lightblue': $lightblue,
     'navy': $navy,
     'olive': $olive,
     'lime': $lime,

dist/css/adminlte.css

@@ -12032,6 +12032,17 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
   border-color: #343a40;
 }
 
+.sidebar-dark-lightblue .nav-sidebar > .nav-item > .nav-link.active,
+.sidebar-light-lightblue .nav-sidebar > .nav-item > .nav-link.active {
+  background-color: #3c8dbc;
+  color: #ffffff;
+}
+
+.sidebar-dark-lightblue .nav-sidebar.nav-legacy > .nav-item > .nav-link.active,
+.sidebar-light-lightblue .nav-sidebar.nav-legacy > .nav-item > .nav-link.active {
+  border-color: #3c8dbc;
+}
+
 .sidebar-dark-navy .nav-sidebar > .nav-item > .nav-link.active,
 .sidebar-light-navy .nav-sidebar > .nav-item > .nav-link.active {
   background-color: #001f3f;
@@ -13306,6 +13317,10 @@ body.text-sm .control-sidebar {
   background-color: #dc3545;
 }
 
+.navbar-lightblue {
+  background-color: #3c8dbc;
+}
+
 .navbar-navy {
   background-color: #001f3f;
 }
@@ -13755,6 +13770,32 @@ textarea.form-control.is-warning {
   background: #7a8793;
 }
 
+.custom-switch.custom-switch-off-lightblue .custom-control-input ~ .custom-control-label::before {
+  background: #3c8dbc;
+  border-color: #23536f;
+}
+
+.custom-switch.custom-switch-off-lightblue .custom-control-input:focus ~ .custom-control-label::before {
+  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px rgba(60, 141, 188, 0.25);
+}
+
+.custom-switch.custom-switch-off-lightblue .custom-control-input ~ .custom-control-label::after {
+  background: #1d455b;
+}
+
+.custom-switch.custom-switch-on-lightblue .custom-control-input:checked ~ .custom-control-label::before {
+  background: #3c8dbc;
+  border-color: #23536f;
+}
+
+.custom-switch.custom-switch-on-lightblue .custom-control-input:checked:focus ~ .custom-control-label::before {
+  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px rgba(60, 141, 188, 0.25);
+}
+
+.custom-switch.custom-switch-on-lightblue .custom-control-input:checked ~ .custom-control-label::after {
+  background: #acd0e5;
+}
+
 .custom-switch.custom-switch-off-navy .custom-control-input ~ .custom-control-label::before {
   background: #001f3f;
   border-color: black;
@@ -14543,6 +14584,46 @@ textarea.form-control.is-warning {
   background-color: #88939e;
 }
 
+.custom-range.custom-range-lightblue:focus {
+  outline: none;
+}
+
+.custom-range.custom-range-lightblue:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px rgba(60, 141, 188, 0.25);
+}
+
+.custom-range.custom-range-lightblue:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px rgba(60, 141, 188, 0.25);
+}
+
+.custom-range.custom-range-lightblue:focus::-ms-thumb {
+  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px rgba(60, 141, 188, 0.25);
+}
+
+.custom-range.custom-range-lightblue::-webkit-slider-thumb {
+  background-color: #3c8dbc;
+}
+
+.custom-range.custom-range-lightblue::-webkit-slider-thumb:active {
+  background-color: #c0dbeb;
+}
+
+.custom-range.custom-range-lightblue::-moz-range-thumb {
+  background-color: #3c8dbc;
+}
+
+.custom-range.custom-range-lightblue::-moz-range-thumb:active {
+  background-color: #c0dbeb;
+}
+
+.custom-range.custom-range-lightblue::-ms-thumb {
+  background-color: #3c8dbc;
+}
+
+.custom-range.custom-range-lightblue::-ms-thumb:active {
+  background-color: #c0dbeb;
+}
+
 .custom-range.custom-range-navy:focus {
   outline: none;
 }
@@ -15672,6 +15753,10 @@ html.maximized-card {
   border-left-color: #343a40;
 }
 
+.todo-list .lightblue {
+  border-left-color: #3c8dbc;
+}
+
 .todo-list .navy {
   border-left-color: #001f3f;
 }
@@ -16322,6 +16407,77 @@ html.maximized-card {
   color: #ffffff;
 }
 
+.card-lightblue:not(.card-outline) > .card-header {
+  background-color: #3c8dbc;
+}
+
+.card-lightblue:not(.card-outline) > .card-header,
+.card-lightblue:not(.card-outline) > .card-header a {
+  color: #ffffff;
+}
+
+.card-lightblue:not(.card-outline) > .card-header a.active {
+  color: #1F2D3D;
+}
+
+.card-lightblue.card-outline {
+  border-top: 3px solid #3c8dbc;
+}
+
+.card-lightblue.card-outline-tabs > .card-header a:hover {
+  border-top: 3px solid #dee2e6;
+}
+
+.card-lightblue.card-outline-tabs > .card-header a.active {
+  border-top: 3px solid #3c8dbc;
+}
+
+.bg-lightblue .btn-tool,
+.bg-gradient-lightblue .btn-tool,
+.card-lightblue:not(.card-outline) .btn-tool {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.bg-lightblue .btn-tool:hover,
+.bg-gradient-lightblue .btn-tool:hover,
+.card-lightblue:not(.card-outline) .btn-tool:hover {
+  color: #ffffff;
+}
+
+.card.bg-lightblue .bootstrap-datetimepicker-widget .table td,
+.card.bg-lightblue .bootstrap-datetimepicker-widget .table th,
+.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget .table td,
+.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget .table th {
+  border: none;
+}
+
+.card.bg-lightblue .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
+.card.bg-lightblue .bootstrap-datetimepicker-widget table td.day:hover,
+.card.bg-lightblue .bootstrap-datetimepicker-widget table td.hour:hover,
+.card.bg-lightblue .bootstrap-datetimepicker-widget table td.minute:hover,
+.card.bg-lightblue .bootstrap-datetimepicker-widget table td.second:hover,
+.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
+.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.day:hover,
+.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.hour:hover,
+.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.minute:hover,
+.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.second:hover {
+  background: #32769d;
+  color: #ffffff;
+}
+
+.card.bg-lightblue .bootstrap-datetimepicker-widget table td.today::before,
+.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.today::before {
+  border-bottom-color: #ffffff;
+}
+
+.card.bg-lightblue .bootstrap-datetimepicker-widget table td.active,
+.card.bg-lightblue .bootstrap-datetimepicker-widget table td.active:hover,
+.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.active,
+.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.active:hover {
+  background: #5fa4cc;
+  color: #ffffff;
+}
+
 .card-navy:not(.card-outline) > .card-header {
   background-color: #001f3f;
 }
@@ -17772,6 +17928,20 @@ html.maximized-card {
   color: #ffffff;
 }
 
+.toast.bg-lightblue {
+  background: rgba(60, 141, 188, 0.9) !important;
+}
+
+.toast.bg-lightblue .close, .toast.bg-lightblue .mailbox-attachment-close {
+  color: #ffffff;
+  text-shadow: 0 1px 0 #000;
+}
+
+.toast.bg-lightblue .toast-header {
+  background: rgba(60, 141, 188, 0.85);
+  color: #ffffff;
+}
+
 .toast.bg-navy {
   background: rgba(0, 31, 63, 0.9) !important;
 }
@@ -19145,6 +19315,16 @@ html.maximized-card {
   border-left-color: #343a40;
 }
 
+.direct-chat-lightblue .right > .direct-chat-text {
+  background: #3c8dbc;
+  border-color: #3c8dbc;
+  color: #ffffff;
+}
+
+.direct-chat-lightblue .right > .direct-chat-text::after, .direct-chat-lightblue .right > .direct-chat-text::before {
+  border-left-color: #3c8dbc;
+}
+
 .direct-chat-navy .right > .direct-chat-text {
   background: #001f3f;
   border-color: #001f3f;
@@ -20514,6 +20694,55 @@ html.maximized-card {
   border-color: #6d7a86;
 }
 
+.select2-container--default .select2-lightblue.select2-dropdown .select2-search__field:focus,
+.select2-container--default .select2-lightblue .select2-dropdown .select2-search__field:focus,
+.select2-container--default .select2-lightblue .select2-search--inline .select2-search__field:focus,
+.select2-lightblue .select2-container--default.select2-dropdown .select2-search__field:focus,
+.select2-lightblue .select2-container--default .select2-dropdown .select2-search__field:focus,
+.select2-lightblue .select2-container--default .select2-search--inline .select2-search__field:focus {
+  border: 1px solid #99c5de;
+}
+
+.select2-container--default .select2-lightblue .select2-results__option--highlighted,
+.select2-lightblue .select2-container--default .select2-results__option--highlighted {
+  background-color: #3c8dbc;
+  color: #ffffff;
+}
+
+.select2-container--default .select2-lightblue .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-lightblue .select2-results__option--highlighted[aria-selected]:hover,
+.select2-lightblue .select2-container--default .select2-results__option--highlighted[aria-selected],
+.select2-lightblue .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
+  background-color: #3884b0;
+  color: #ffffff;
+}
+
+.select2-container--default .select2-lightblue .select2-selection--multiple:focus,
+.select2-lightblue .select2-container--default .select2-selection--multiple:focus {
+  border-color: #99c5de;
+}
+
+.select2-container--default .select2-lightblue .select2-selection--multiple .select2-selection__choice,
+.select2-lightblue .select2-container--default .select2-selection--multiple .select2-selection__choice {
+  background-color: #3c8dbc;
+  border-color: #367fa9;
+  color: #ffffff;
+}
+
+.select2-container--default .select2-lightblue .select2-selection--multiple .select2-selection__choice__remove,
+.select2-lightblue .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.select2-container--default .select2-lightblue .select2-selection--multiple .select2-selection__choice__remove:hover,
+.select2-lightblue .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+  color: #ffffff;
+}
+
+.select2-container--default .select2-lightblue.select2-container--focus .select2-selection--multiple,
+.select2-lightblue .select2-container--default.select2-container--focus .select2-selection--multiple {
+  border-color: #99c5de;
+}
+
 .select2-container--default .select2-navy.select2-dropdown .select2-search__field:focus,
 .select2-container--default .select2-navy .select2-dropdown .select2-search__field:focus,
 .select2-container--default .select2-navy .select2-search--inline .select2-search__field:focus,
@@ -21440,6 +21669,10 @@ html.maximized-card {
   background: #343a40;
 }
 
+.slider-lightblue .slider .slider-selection {
+  background: #3c8dbc;
+}
+
 .slider-navy .slider .slider-selection {
   background: #001f3f;
 }
@@ -21640,6 +21873,22 @@ html.maximized-card {
   border-color: #343a40;
 }
 
+.icheck-lightblue > input:first-child:not(:checked):not(:disabled):hover + label::before,
+.icheck-lightblue > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
+  border-color: #3c8dbc;
+}
+
+.icheck-lightblue > input:first-child:not(:checked):not(:disabled):focus + label::before,
+.icheck-lightblue > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
+  border-color: #3c8dbc;
+}
+
+.icheck-lightblue > input:first-child:checked + label::before,
+.icheck-lightblue > input:first-child:checked + input[type="hidden"] + label::before {
+  background-color: #3c8dbc;
+  border-color: #3c8dbc;
+}
+
 .icheck-navy > input:first-child:not(:checked):not(:disabled):hover + label::before,
 .icheck-navy > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
   border-color: #001f3f;
@@ -23137,6 +23386,137 @@ html.maximized-card {
   color: #343a40;
 }
 
+.pace-lightblue .pace .pace-progress {
+  background: #3c8dbc;
+}
+
+.pace-barber-shop-lightblue .pace {
+  background: #ffffff;
+}
+
+.pace-barber-shop-lightblue .pace .pace-progress {
+  background: #3c8dbc;
+}
+
+.pace-barber-shop-lightblue .pace .pace-activity {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+}
+
+.pace-big-counter-lightblue .pace .pace-progress::after {
+  color: rgba(60, 141, 188, 0.2);
+}
+
+.pace-bounce-lightblue .pace .pace-activity {
+  background: #3c8dbc;
+}
+
+.pace-center-atom-lightblue .pace-progress {
+  height: 100px;
+  width: 80px;
+}
+
+.pace-center-atom-lightblue .pace-progress::before {
+  background: #3c8dbc;
+  color: #ffffff;
+  font-size: .8rem;
+  line-height: .7rem;
+  padding-top: 17%;
+}
+
+.pace-center-atom-lightblue .pace-activity {
+  border-color: #3c8dbc;
+}
+
+.pace-center-atom-lightblue .pace-activity::after, .pace-center-atom-lightblue .pace-activity::before {
+  border-color: #3c8dbc;
+}
+
+.pace-center-circle-lightblue .pace .pace-progress {
+  background: rgba(60, 141, 188, 0.8);
+  color: #ffffff;
+}
+
+.pace-center-radar-lightblue .pace .pace-activity {
+  border-color: #3c8dbc transparent transparent;
+}
+
+.pace-center-radar-lightblue .pace .pace-activity::before {
+  border-color: #3c8dbc transparent transparent;
+}
+
+.pace-center-simple-lightblue .pace {
+  background: #ffffff;
+  border-color: #3c8dbc;
+}
+
+.pace-center-simple-lightblue .pace .pace-progress {
+  background: #3c8dbc;
+}
+
+.pace-material-lightblue .pace {
+  color: #3c8dbc;
+}
+
+.pace-corner-indicator-lightblue .pace .pace-activity {
+  background: #3c8dbc;
+}
+
+.pace-corner-indicator-lightblue .pace .pace-activity::after,
+.pace-corner-indicator-lightblue .pace .pace-activity::before  {
+  border: 5px solid #ffffff;
+}
+
+.pace-corner-indicator-lightblue .pace .pace-activity::before {
+  border-right-color: rgba(60, 141, 188, 0.2);
+  border-left-color: rgba(60, 141, 188, 0.2);
+}
+
+.pace-corner-indicator-lightblue .pace .pace-activity::after {
+  border-top-color: rgba(60, 141, 188, 0.2);
+  border-bottom-color: rgba(60, 141, 188, 0.2);
+}
+
+.pace-fill-left-lightblue .pace .pace-progress {
+  background-color: rgba(60, 141, 188, 0.2);
+}
+
+.pace-flash-lightblue .pace .pace-progress {
+  background: #3c8dbc;
+}
+
+.pace-flash-lightblue .pace .pace-progress-inner {
+  box-shadow: 0 0 10px #3c8dbc, 0 0 5px #3c8dbc;
+}
+
+.pace-flash-lightblue .pace .pace-activity {
+  border-top-color: #3c8dbc;
+  border-left-color: #3c8dbc;
+}
+
+.pace-loading-bar-lightblue .pace .pace-progress {
+  background: #3c8dbc;
+  color: #3c8dbc;
+  box-shadow: 120px 0 #ffffff, 240px 0 #ffffff;
+}
+
+.pace-loading-bar-lightblue .pace .pace-activity {
+  box-shadow: inset 0 0 0 2px #3c8dbc, inset 0 0 0 7px #ffffff;
+}
+
+.pace-mac-osx-lightblue .pace .pace-progress {
+  background-color: #3c8dbc;
+  box-shadow: inset -1px 0 #3c8dbc, inset 0 -1px #3c8dbc, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
+}
+
+.pace-mac-osx-lightblue .pace .pace-activity {
+  background-image: radial-gradient(rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.15) 100%);
+  height: 12px;
+}
+
+.pace-progress-color-lightblue .pace-progress {
+  color: #3c8dbc;
+}
+
 .pace-navy .pace .pace-progress {
   background: #001f3f;
 }
@@ -25607,6 +25987,12 @@ html.maximized-card {
   color: #ffffff;
 }
 
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-lightblue,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-lightblue {
+  background: #3c8dbc;
+  color: #ffffff;
+}
+
 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-navy,
 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-navy {
   background: #001f3f;
@@ -26357,6 +26743,19 @@ blockquote.quote-dark h6 {
   color: #343a40;
 }
 
+blockquote.quote-lightblue {
+  border-color: #3c8dbc;
+}
+
+blockquote.quote-lightblue h1,
+blockquote.quote-lightblue h2,
+blockquote.quote-lightblue h3,
+blockquote.quote-lightblue h4,
+blockquote.quote-lightblue h5,
+blockquote.quote-lightblue h6 {
+  color: #3c8dbc;
+}
+
 blockquote.quote-navy {
   border-color: #001f3f;
 }
@@ -26664,6 +27063,10 @@ blockquote.quote-gray-dark h6 {
   font-size: 2rem !important;
 }
 
+.text-lightblue {
+  color: #3c8dbc;
+}
+
 .text-navy {
   color: #001f3f;
 }
@@ -26920,6 +27323,26 @@ blockquote.quote-gray-dark h6 {
   color: #ffffff;
 }
 
+.bg-lightblue {
+  background-color: #3c8dbc !important;
+}
+
+.bg-lightblue,
+.bg-lightblue > a {
+  color: #ffffff !important;
+}
+
+.bg-lightblue.btn:hover {
+  border-color: #307095;
+  color: #ececec;
+}
+
+.bg-lightblue.btn:not(:disabled):not(.disabled):active, .bg-lightblue.btn:not(:disabled):not(.disabled).active, .bg-lightblue.btn:active, .bg-lightblue.btn.active {
+  background-color: #307095 !important;
+  border-color: #2d698c;
+  color: #ffffff;
+}
+
 .bg-navy {
   background-color: #001f3f !important;
 }
@@ -27548,6 +27971,37 @@ blockquote.quote-gray-dark h6 {
   background: #1d2124 linear-gradient(180deg, #3f4245, #1d2124) repeat-x !important;
 }
 
+.bg-gradient-lightblue {
+  color: #ffffff;
+}
+
+.bg-gradient-lightblue {
+  background: #3c8dbc linear-gradient(180deg, #599ec6, #3c8dbc) repeat-x !important;
+}
+
+.bg-gradient-lightblue.btn.disabled, .bg-gradient-lightblue.btn:disabled, .bg-gradient-lightblue.btn:not(:disabled):not(.disabled):active, .bg-gradient-lightblue.btn:not(:disabled):not(.disabled).active,
+.show > .bg-gradient-lightblue.btn.dropdown-toggle {
+  background-image: none !important;
+}
+
+.bg-gradient-lightblue.btn:hover {
+  border-color: #307095;
+  color: #ececec;
+}
+
+.bg-gradient-lightblue.btn:hover {
+  background: #33779f linear-gradient(180deg, #518cad, #33779f) repeat-x !important;
+}
+
+.bg-gradient-lightblue.btn:not(:disabled):not(.disabled):active, .bg-gradient-lightblue.btn:not(:disabled):not(.disabled).active, .bg-gradient-lightblue.btn:active, .bg-gradient-lightblue.btn.active {
+  border-color: #2d698c;
+  color: #ffffff;
+}
+
+.bg-gradient-lightblue.btn:not(:disabled):not(.disabled):active, .bg-gradient-lightblue.btn:not(:disabled):not(.disabled).active, .bg-gradient-lightblue.btn:active, .bg-gradient-lightblue.btn.active {
+  background: #307095 linear-gradient(180deg, #4f85a5, #307095) repeat-x !important;
+}
+
 .bg-gradient-navy {
   color: #ffffff;
 }
@@ -28322,6 +28776,30 @@ a.text-muted:hover {
   border-color: #dee2e6;
 }
 
+.accent-lightblue .btn-link,
+.accent-lightblue a {
+  color: #3c8dbc;
+}
+
+.accent-lightblue .btn-link:hover,
+.accent-lightblue a:hover {
+  color: #296282;
+}
+
+.accent-lightblue [class*="sidebar-light-"] .nav-sidebar .nav-treeview > .nav-item > .nav-link:not(.active):hover, .accent-lightblue[class*="sidebar-dark-"] .nav-sidebar .nav-treeview > .nav-item > .nav-link:not(.active):hover {
+  color: #3c8dbc;
+}
+
+.accent-lightblue .page-item.active .page-link {
+  background-color: #3c8dbc;
+  border-color: #3c8dbc;
+}
+
+.accent-lightblue .page-item.disabled .page-link {
+  background-color: #ffffff;
+  border-color: #dee2e6;
+}
+
 .accent-navy .btn-link,
 .accent-navy a {
   color: #001f3f;

dist/js/demo.js

@@ -23,6 +23,8 @@
     'navbar-indigo',
     'navbar-purple',
     'navbar-pink',
+    'navbar-navy',
+    'navbar-lightblue',
     'navbar-teal',
     'navbar-cyan',
     'navbar-dark',
@@ -240,6 +242,7 @@
     'bg-danger',
     'bg-success',
     'bg-indigo',
+    'bg-lightblue',
     'bg-navy',
     'bg-purple',
     'bg-fuchsia',
@@ -258,6 +261,7 @@
     'accent-danger',
     'accent-success',
     'accent-indigo',
+    'accent-lightblue',
     'accent-navy',
     'accent-purple',
     'accent-fuchsia',
@@ -276,6 +280,7 @@
     'sidebar-dark-danger',
     'sidebar-dark-success',
     'sidebar-dark-indigo',
+    'sidebar-dark-lightblue',
     'sidebar-dark-navy',
     'sidebar-dark-purple',
     'sidebar-dark-fuchsia',
@@ -291,6 +296,7 @@
     'sidebar-light-danger',
     'sidebar-light-success',
     'sidebar-light-indigo',
+    'sidebar-light-lightblue',
     'sidebar-light-navy',
     'sidebar-light-purple',
     'sidebar-light-fuchsia',

pages/UI/general.html

@@ -888,6 +888,15 @@
                 </div>
               </div>
               <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-lightblue">Lightblue</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-lightblue color-palette"><span>#3c8dbc</span></div>
+                  <div class="bg-lightblue disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
               <div class="col-sm-4 col-md-2">
                 <h4 class="text-center bg-navy">Navy</h4>