development/examples/example3/build/assets/css/color-blue.css

+/*============================
+		COLOR Blue
+==============================*/
+::selection {
+  background: #007bff;
+}
+
+a, a:focus {
+  color: #007bff;
+}
+
+a:hover, a:active {
+  color: #006adb;
+}
+
+.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li > a.active:not(.btn) {
+  color: #007bff;
+}
+.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
+  color: #007bff;
+}
+.primary-menu.navbar-line-under-text ul.navbar-nav > li > a:not(.btn):after {
+  border-color: #007bff;
+}
+
+/*=== Side Navigation ===*/
+.idocs-navigation .nav .nav .nav-item .nav-link.active:after, .idocs-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after {
+  border-color: #007bff;
+}
+
+/* Accordion & Toggle */
+.accordion .card-header a:hover.collapsed {
+  color: #007bff !important;
+}
+.accordion:not(.accordion-alternate) .card-header a {
+  background-color: #007bff;
+  color: #fff;
+}
+
+/* Nav */
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover {
+  color: #007bff;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #0c2f55;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+  background-color: #007bff;
+}
+.nav-tabs .nav-item .nav-link:not(.active):hover {
+  color: #007bff;
+}
+.nav-tabs.flex-column .nav-item .nav-link.active {
+  color: #007bff;
+}
+
+.nav-pills .nav-link:not(.active):hover {
+  color: #007bff;
+}
+
+#footer .nav .nav-item .nav-link:focus {
+  color: #007bff;
+}
+#footer .nav .nav-link:hover {
+  color: #007bff;
+}
+#footer .footer-copyright .nav .nav-link:hover {
+  color: #007bff;
+}
+
+/* Back to Top */
+#back-to-top:hover {
+  background-color: #007bff;
+}
+
+/* Extras */
+.bg-primary, .badge-primary {
+  background-color: #007bff !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+  color: #007bff !important;
+}
+
+.btn-link:hover {
+  color: #006adb !important;
+}
+
+.text-muted {
+  color: #8e9a9d !important;
+}
+
+.text-light {
+  color: #dee3e4 !important;
+}
+
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+  background-color: #006adb !important;
+}
+
+.border-primary {
+  border-color: #007bff !important;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  border-color: #007bff;
+}
+.btn-primary:hover {
+  background-color: #006adb;
+  border-color: #006adb;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #006adb;
+  border-color: #006adb;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  background-color: #006adb;
+  border-color: #006adb;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  color: #007bff;
+  border-color: #007bff;
+}
+.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
+  background-color: #007bff;
+  border-color: #007bff;
+  color: #fff;
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
+  background-color: #007bff;
+}
+
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before {
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+.list-group-item.active {
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+.page-link {
+  color: #007bff;
+}
+.page-link:hover {
+  color: #006adb;
+}

development/examples/example3/build/assets/css/color-brown.css

+/*============================
+		COLOR Brown
+==============================*/
+::selection {
+  background: #795548;
+}
+
+a, a:focus {
+  color: #795548;
+}
+
+a:hover, a:active {
+  color: #63453b;
+}
+
+.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li > a.active:not(.btn) {
+  color: #795548;
+}
+.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
+  color: #795548;
+}
+.primary-menu.navbar-line-under-text ul.navbar-nav > li > a:not(.btn):after {
+  border-color: #795548;
+}
+
+/*=== Side Navigation ===*/
+.idocs-navigation .nav .nav .nav-item .nav-link.active:after, .idocs-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after {
+  border-color: #795548;
+}
+
+/* Accordion & Toggle */
+.accordion .card-header a:hover.collapsed {
+  color: #795548 !important;
+}
+.accordion:not(.accordion-alternate) .card-header a {
+  background-color: #795548;
+  color: #fff;
+}
+
+/* Nav */
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover {
+  color: #795548;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #0c2f55;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+  background-color: #795548;
+}
+.nav-tabs .nav-item .nav-link:not(.active):hover {
+  color: #795548;
+}
+.nav-tabs.flex-column .nav-item .nav-link.active {
+  color: #795548;
+}
+
+.nav-pills .nav-link:not(.active):hover {
+  color: #795548;
+}
+
+#footer .nav .nav-item .nav-link:focus {
+  color: #795548;
+}
+#footer .nav .nav-link:hover {
+  color: #795548;
+}
+#footer .footer-copyright .nav .nav-link:hover {
+  color: #795548;
+}
+
+/* Back to Top */
+#back-to-top:hover {
+  background-color: #795548;
+}
+
+/* Extras */
+.bg-primary, .badge-primary {
+  background-color: #795548 !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+  color: #795548 !important;
+}
+
+.btn-link:hover {
+  color: #63453b !important;
+}
+
+.text-muted {
+  color: #8e9a9d !important;
+}
+
+.text-light {
+  color: #dee3e4 !important;
+}
+
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+  background-color: #63453b !important;
+}
+
+.border-primary {
+  border-color: #795548 !important;
+}
+
+.btn-primary {
+  background-color: #795548;
+  border-color: #795548;
+}
+.btn-primary:hover {
+  background-color: #63453b;
+  border-color: #63453b;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #63453b;
+  border-color: #63453b;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  background-color: #63453b;
+  border-color: #63453b;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  color: #795548;
+  border-color: #795548;
+}
+.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
+  background-color: #795548;
+  border-color: #795548;
+  color: #fff;
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
+  background-color: #795548;
+}
+
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before {
+  background-color: #795548;
+  border-color: #795548;
+}
+
+.list-group-item.active {
+  background-color: #795548;
+  border-color: #795548;
+}
+
+.page-link {
+  color: #795548;
+}
+.page-link:hover {
+  color: #63453b;
+}

development/examples/example3/build/assets/css/color-cyan.css

+/*============================
+		COLOR Cyan
+==============================*/
+::selection {
+  background: #17a2b8;
+}
+
+a, a:focus {
+  color: #17a2b8;
+}
+
+a:hover, a:active {
+  color: #138698;
+}
+
+.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li > a.active:not(.btn) {
+  color: #17a2b8;
+}
+.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
+  color: #17a2b8;
+}
+.primary-menu.navbar-line-under-text ul.navbar-nav > li > a:not(.btn):after {
+  border-color: #17a2b8;
+}
+
+/*=== Side Navigation ===*/
+.idocs-navigation .nav .nav .nav-item .nav-link.active:after, .idocs-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after {
+  border-color: #17a2b8;
+}
+
+/* Accordion & Toggle */
+.accordion .card-header a:hover.collapsed {
+  color: #17a2b8 !important;
+}
+.accordion:not(.accordion-alternate) .card-header a {
+  background-color: #17a2b8;
+  color: #fff;
+}
+
+/* Nav */
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover {
+  color: #17a2b8;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #0c2f55;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+  background-color: #17a2b8;
+}
+.nav-tabs .nav-item .nav-link:not(.active):hover {
+  color: #17a2b8;
+}
+.nav-tabs.flex-column .nav-item .nav-link.active {
+  color: #17a2b8;
+}
+
+.nav-pills .nav-link:not(.active):hover {
+  color: #17a2b8;
+}
+
+#footer .nav .nav-item .nav-link:focus {
+  color: #17a2b8;
+}
+#footer .nav .nav-link:hover {
+  color: #17a2b8;
+}
+#footer .footer-copyright .nav .nav-link:hover {
+  color: #17a2b8;
+}
+
+/* Back to Top */
+#back-to-top:hover {
+  background-color: #17a2b8;
+}
+
+/* Extras */
+.bg-primary, .badge-primary {
+  background-color: #17a2b8 !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+  color: #17a2b8 !important;
+}
+
+.btn-link:hover {
+  color: #138698 !important;
+}
+
+.text-muted {
+  color: #8e9a9d !important;
+}
+
+.text-light {
+  color: #dee3e4 !important;
+}
+
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+  background-color: #138698 !important;
+}
+
+.border-primary {
+  border-color: #17a2b8 !important;
+}
+
+.btn-primary {
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+}
+.btn-primary:hover {
+  background-color: #138698;
+  border-color: #138698;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #138698;
+  border-color: #138698;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  background-color: #138698;
+  border-color: #138698;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  color: #17a2b8;
+  border-color: #17a2b8;
+}
+.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+  color: #fff;
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
+  background-color: #17a2b8;
+}
+
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before {
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+}
+
+.list-group-item.active {
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+}
+
+.page-link {
+  color: #17a2b8;
+}
+.page-link:hover {
+  color: #138698;
+}

development/examples/example3/build/assets/css/color-green.css

+/*============================
+		COLOR Green
+==============================*/
+::selection {
+  background: #28a745;
+}
+
+a, a:focus {
+  color: #28a745;
+}
+
+a:hover, a:active {
+  color: #218a39;
+}
+
+.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li > a.active:not(.btn) {
+  color: #28a745;
+}
+.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
+  color: #28a745;
+}
+.primary-menu.navbar-line-under-text ul.navbar-nav > li > a:not(.btn):after {
+  border-color: #28a745;
+}
+
+/*=== Side Navigation ===*/
+.idocs-navigation .nav .nav .nav-item .nav-link.active:after, .idocs-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after {
+  border-color: #28a745;
+}
+
+/* Accordion & Toggle */
+.accordion .card-header a:hover.collapsed {
+  color: #28a745 !important;
+}
+.accordion:not(.accordion-alternate) .card-header a {
+  background-color: #28a745;
+  color: #fff;
+}
+
+/* Nav */
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover {
+  color: #28a745;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #0c2f55;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+  background-color: #28a745;
+}
+.nav-tabs .nav-item .nav-link:not(.active):hover {
+  color: #28a745;
+}
+.nav-tabs.flex-column .nav-item .nav-link.active {
+  color: #28a745;
+}
+
+.nav-pills .nav-link:not(.active):hover {
+  color: #28a745;
+}
+
+#footer .nav .nav-item .nav-link:focus {
+  color: #28a745;
+}
+#footer .nav .nav-link:hover {
+  color: #28a745;
+}
+#footer .footer-copyright .nav .nav-link:hover {
+  color: #28a745;
+}
+
+/* Back to Top */
+#back-to-top:hover {
+  background-color: #28a745;
+}
+
+/* Extras */
+.bg-primary, .badge-primary {
+  background-color: #28a745 !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+  color: #28a745 !important;
+}
+
+.btn-link:hover {
+  color: #218a39 !important;
+}
+
+.text-muted {
+  color: #8e9a9d !important;
+}
+
+.text-light {
+  color: #dee3e4 !important;
+}
+
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+  background-color: #218a39 !important;
+}
+
+.border-primary {
+  border-color: #28a745 !important;
+}
+
+.btn-primary {
+  background-color: #28a745;
+  border-color: #28a745;
+}
+.btn-primary:hover {
+  background-color: #218a39;
+  border-color: #218a39;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #218a39;
+  border-color: #218a39;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  background-color: #218a39;
+  border-color: #218a39;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  color: #28a745;
+  border-color: #28a745;
+}
+.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
+  background-color: #28a745;
+  border-color: #28a745;
+  color: #fff;
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
+  background-color: #28a745;
+}
+
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before {
+  background-color: #28a745;
+  border-color: #28a745;
+}
+
+.list-group-item.active {
+  background-color: #28a745;
+  border-color: #28a745;
+}
+
+.page-link {
+  color: #28a745;
+}
+.page-link:hover {
+  color: #218a39;
+}

development/examples/example3/build/assets/css/color-indigo.css

+/*============================
+		COLOR Indigo
+==============================*/
+::selection {
+  background: #6610f2;
+}
+
+a, a:focus {
+  color: #6610f2;
+}
+
+a:hover, a:active {
+  color: #570bd3;
+}
+
+.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li > a.active:not(.btn) {
+  color: #6610f2;
+}
+.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
+  color: #6610f2;
+}
+.primary-menu.navbar-line-under-text ul.navbar-nav > li > a:not(.btn):after {
+  border-color: #6610f2;
+}
+
+/*=== Side Navigation ===*/
+.idocs-navigation .nav .nav .nav-item .nav-link.active:after, .idocs-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after {
+  border-color: #6610f2;
+}
+
+/* Accordion & Toggle */
+.accordion .card-header a:hover.collapsed {
+  color: #6610f2 !important;
+}
+.accordion:not(.accordion-alternate) .card-header a {
+  background-color: #6610f2;
+  color: #fff;
+}
+
+/* Nav */
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover {
+  color: #6610f2;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #0c2f55;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+  background-color: #6610f2;
+}
+.nav-tabs .nav-item .nav-link:not(.active):hover {
+  color: #6610f2;
+}
+.nav-tabs.flex-column .nav-item .nav-link.active {
+  color: #6610f2;
+}
+
+.nav-pills .nav-link:not(.active):hover {
+  color: #6610f2;
+}
+
+#footer .nav .nav-item .nav-link:focus {
+  color: #6610f2;
+}
+#footer .nav .nav-link:hover {
+  color: #6610f2;
+}
+#footer .footer-copyright .nav .nav-link:hover {
+  color: #6610f2;
+}
+
+/* Back to Top */
+#back-to-top:hover {
+  background-color: #6610f2;
+}
+
+/* Extras */
+.bg-primary, .badge-primary {
+  background-color: #6610f2 !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+  color: #6610f2 !important;
+}
+
+.btn-link:hover {
+  color: #570bd3 !important;
+}
+
+.text-muted {
+  color: #8e9a9d !important;
+}
+
+.text-light {
+  color: #dee3e4 !important;
+}
+
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+  background-color: #570bd3 !important;
+}
+
+.border-primary {
+  border-color: #6610f2 !important;
+}
+
+.btn-primary {
+  background-color: #6610f2;
+  border-color: #6610f2;
+}
+.btn-primary:hover {
+  background-color: #570bd3;
+  border-color: #570bd3;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #570bd3;
+  border-color: #570bd3;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  background-color: #570bd3;
+  border-color: #570bd3;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  color: #6610f2;
+  border-color: #6610f2;
+}
+.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
+  background-color: #6610f2;
+  border-color: #6610f2;
+  color: #fff;
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
+  background-color: #6610f2;
+}
+
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before {
+  background-color: #6610f2;
+  border-color: #6610f2;
+}
+
+.list-group-item.active {
+  background-color: #6610f2;
+  border-color: #6610f2;
+}
+
+.page-link {
+  color: #6610f2;
+}
+.page-link:hover {
+  color: #570bd3;
+}

development/examples/example3/build/assets/css/color-orange.css

+/*============================
+		COLOR Orange
+==============================*/
+::selection {
+  background: #fd7e14;
+}
+
+a, a:focus {
+  color: #fd7e14;
+}
+
+a:hover, a:active {
+  color: #eb6c02;
+}
+
+.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li > a.active:not(.btn) {
+  color: #fd7e14;
+}
+.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
+  color: #fd7e14;
+}
+.primary-menu.navbar-line-under-text ul.navbar-nav > li > a:not(.btn):after {
+  border-color: #fd7e14;
+}
+
+/*=== Side Navigation ===*/
+.idocs-navigation .nav .nav .nav-item .nav-link.active:after, .idocs-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after {
+  border-color: #fd7e14;
+}
+
+/* Accordion & Toggle */
+.accordion .card-header a:hover.collapsed {
+  color: #fd7e14 !important;
+}
+.accordion:not(.accordion-alternate) .card-header a {
+  background-color: #fd7e14;
+  color: #fff;
+}
+
+/* Nav */
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover {
+  color: #fd7e14;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #0c2f55;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+  background-color: #fd7e14;
+}
+.nav-tabs .nav-item .nav-link:not(.active):hover {
+  color: #fd7e14;
+}
+.nav-tabs.flex-column .nav-item .nav-link.active {
+  color: #fd7e14;
+}
+
+.nav-pills .nav-link:not(.active):hover {
+  color: #fd7e14;
+}
+
+#footer .nav .nav-item .nav-link:focus {
+  color: #fd7e14;
+}
+#footer .nav .nav-link:hover {
+  color: #fd7e14;
+}
+#footer .footer-copyright .nav .nav-link:hover {
+  color: #fd7e14;
+}
+
+/* Back to Top */
+#back-to-top:hover {
+  background-color: #fd7e14;
+}
+
+/* Extras */
+.bg-primary, .badge-primary {
+  background-color: #fd7e14 !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+  color: #fd7e14 !important;
+}
+
+.btn-link:hover {
+  color: #eb6c02 !important;
+}
+
+.text-muted {
+  color: #8e9a9d !important;
+}
+
+.text-light {
+  color: #dee3e4 !important;
+}
+
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+  background-color: #eb6c02 !important;
+}
+
+.border-primary {
+  border-color: #fd7e14 !important;
+}
+
+.btn-primary {
+  background-color: #fd7e14;
+  border-color: #fd7e14;
+}
+.btn-primary:hover {
+  background-color: #eb6c02;
+  border-color: #eb6c02;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #eb6c02;
+  border-color: #eb6c02;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  background-color: #eb6c02;
+  border-color: #eb6c02;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  color: #fd7e14;
+  border-color: #fd7e14;
+}
+.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
+  background-color: #fd7e14;
+  border-color: #fd7e14;
+  color: #fff;
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
+  background-color: #fd7e14;
+}
+
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before {
+  background-color: #fd7e14;
+  border-color: #fd7e14;
+}
+
+.list-group-item.active {
+  background-color: #fd7e14;
+  border-color: #fd7e14;
+}
+
+.page-link {
+  color: #fd7e14;
+}
+.page-link:hover {
+  color: #eb6c02;
+}

development/examples/example3/build/assets/css/color-purple.css

+/*============================
+		COLOR Purple
+==============================*/
+::selection {
+  background: #6f42c1;
+}
+
+a, a:focus {
+  color: #6f42c1;
+}
+
+a:hover, a:active {
+  color: #5f37a8;
+}
+
+.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li > a.active:not(.btn) {
+  color: #6f42c1;
+}
+.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
+  color: #6f42c1;
+}
+.primary-menu.navbar-line-under-text ul.navbar-nav > li > a:not(.btn):after {
+  border-color: #6f42c1;
+}
+
+/*=== Side Navigation ===*/
+.idocs-navigation .nav .nav .nav-item .nav-link.active:after, .idocs-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after {
+  border-color: #6f42c1;
+}
+
+/* Accordion & Toggle */
+.accordion .card-header a:hover.collapsed {
+  color: #6f42c1 !important;
+}
+.accordion:not(.accordion-alternate) .card-header a {
+  background-color: #6f42c1;
+  color: #fff;
+}
+
+/* Nav */
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover {
+  color: #6f42c1;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #0c2f55;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+  background-color: #6f42c1;
+}
+.nav-tabs .nav-item .nav-link:not(.active):hover {
+  color: #6f42c1;
+}
+.nav-tabs.flex-column .nav-item .nav-link.active {
+  color: #6f42c1;
+}
+
+.nav-pills .nav-link:not(.active):hover {
+  color: #6f42c1;
+}
+
+#footer .nav .nav-item .nav-link:focus {
+  color: #6f42c1;
+}
+#footer .nav .nav-link:hover {
+  color: #6f42c1;
+}
+#footer .footer-copyright .nav .nav-link:hover {
+  color: #6f42c1;
+}
+
+/* Back to Top */
+#back-to-top:hover {
+  background-color: #6f42c1;
+}
+
+/* Extras */
+.bg-primary, .badge-primary {
+  background-color: #6f42c1 !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+  color: #6f42c1 !important;
+}
+
+.btn-link:hover {
+  color: #5f37a8 !important;
+}
+
+.text-muted {
+  color: #8e9a9d !important;
+}
+
+.text-light {
+  color: #dee3e4 !important;
+}
+
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+  background-color: #5f37a8 !important;
+}
+
+.border-primary {
+  border-color: #6f42c1 !important;
+}
+
+.btn-primary {
+  background-color: #6f42c1;
+  border-color: #6f42c1;
+}
+.btn-primary:hover {
+  background-color: #5f37a8;
+  border-color: #5f37a8;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #5f37a8;
+  border-color: #5f37a8;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  background-color: #5f37a8;
+  border-color: #5f37a8;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  color: #6f42c1;
+  border-color: #6f42c1;
+}
+.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
+  background-color: #6f42c1;
+  border-color: #6f42c1;
+  color: #fff;
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
+  background-color: #6f42c1;
+}
+
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before {
+  background-color: #6f42c1;
+  border-color: #6f42c1;
+}
+
+.list-group-item.active {
+  background-color: #6f42c1;
+  border-color: #6f42c1;
+}
+
+.page-link {
+  color: #6f42c1;
+}
+.page-link:hover {
+  color: #5f37a8;
+}

development/examples/example3/build/assets/css/color-red.css

+/*============================
+		COLOR Red
+==============================*/
+::selection {
+  background: #dc3545;
+}
+
+a, a:focus {
+  color: #dc3545;
+}
+
+a:hover, a:active {
+  color: #ca2333;
+}
+
+.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li > a.active:not(.btn) {
+  color: #dc3545;
+}
+.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
+  color: #dc3545;
+}
+.primary-menu.navbar-line-under-text ul.navbar-nav > li > a:not(.btn):after {
+  border-color: #dc3545;
+}
+
+/*=== Side Navigation ===*/
+.idocs-navigation .nav .nav .nav-item .nav-link.active:after, .idocs-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after {
+  border-color: #dc3545;
+}
+
+/* Accordion & Toggle */
+.accordion .card-header a:hover.collapsed {
+  color: #dc3545 !important;
+}
+.accordion:not(.accordion-alternate) .card-header a {
+  background-color: #dc3545;
+  color: #fff;
+}
+
+/* Nav */
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover {
+  color: #dc3545;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #0c2f55;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+  background-color: #dc3545;
+}
+.nav-tabs .nav-item .nav-link:not(.active):hover {
+  color: #dc3545;
+}
+.nav-tabs.flex-column .nav-item .nav-link.active {
+  color: #dc3545;
+}
+
+.nav-pills .nav-link:not(.active):hover {
+  color: #dc3545;
+}
+
+#footer .nav .nav-item .nav-link:focus {
+  color: #dc3545;
+}
+#footer .nav .nav-link:hover {
+  color: #dc3545;
+}
+#footer .footer-copyright .nav .nav-link:hover {
+  color: #dc3545;
+}
+
+/* Back to Top */
+#back-to-top:hover {
+  background-color: #dc3545;
+}
+
+/* Extras */
+.bg-primary, .badge-primary {
+  background-color: #dc3545 !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+  color: #dc3545 !important;
+}
+
+.btn-link:hover {
+  color: #ca2333 !important;
+}
+
+.text-muted {
+  color: #8e9a9d !important;
+}
+
+.text-light {
+  color: #dee3e4 !important;
+}
+
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+  background-color: #ca2333 !important;
+}
+
+.border-primary {
+  border-color: #dc3545 !important;
+}
+
+.btn-primary {
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+.btn-primary:hover {
+  background-color: #ca2333;
+  border-color: #ca2333;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #ca2333;
+  border-color: #ca2333;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  background-color: #ca2333;
+  border-color: #ca2333;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  color: #dc3545;
+  border-color: #dc3545;
+}
+.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
+  background-color: #dc3545;
+  border-color: #dc3545;
+  color: #fff;
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
+  background-color: #dc3545;
+}
+
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before {
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
+.list-group-item.active {
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
+.page-link {
+  color: #dc3545;
+}
+.page-link:hover {
+  color: #ca2333;
+}

development/examples/example3/build/assets/css/color-teal.css

+/*============================
+		COLOR Teal
+==============================*/
+::selection {
+  background: #20c997;
+}
+
+a, a:focus {
+  color: #20c997;
+}
+
+a:hover, a:active {
+  color: #1baa80;
+}
+
+.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li > a.active:not(.btn) {
+  color: #20c997;
+}
+.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
+  color: #20c997;
+}
+.primary-menu.navbar-line-under-text ul.navbar-nav > li > a:not(.btn):after {
+  border-color: #20c997;
+}
+
+/*=== Side Navigation ===*/
+.idocs-navigation .nav .nav .nav-item .nav-link.active:after, .idocs-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after {
+  border-color: #20c997;
+}
+
+/* Accordion & Toggle */
+.accordion .card-header a:hover.collapsed {
+  color: #20c997 !important;
+}
+.accordion:not(.accordion-alternate) .card-header a {
+  background-color: #20c997;
+  color: #fff;
+}
+
+/* Nav */
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover {
+  color: #20c997;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #0c2f55;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+  background-color: #20c997;
+}
+.nav-tabs .nav-item .nav-link:not(.active):hover {
+  color: #20c997;
+}
+.nav-tabs.flex-column .nav-item .nav-link.active {
+  color: #20c997;
+}
+
+.nav-pills .nav-link:not(.active):hover {
+  color: #20c997;
+}
+
+#footer .nav .nav-item .nav-link:focus {
+  color: #20c997;
+}
+#footer .nav .nav-link:hover {
+  color: #20c997;
+}
+#footer .footer-copyright .nav .nav-link:hover {
+  color: #20c997;
+}
+
+/* Back to Top */
+#back-to-top:hover {
+  background-color: #20c997;
+}
+
+/* Extras */
+.bg-primary, .badge-primary {
+  background-color: #20c997 !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+  color: #20c997 !important;
+}
+
+.btn-link:hover {
+  color: #1baa80 !important;
+}
+
+.text-muted {
+  color: #8e9a9d !important;
+}
+
+.text-light {
+  color: #dee3e4 !important;
+}
+
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+  background-color: #1baa80 !important;
+}
+
+.border-primary {
+  border-color: #20c997 !important;
+}
+
+.btn-primary {
+  background-color: #20c997;
+  border-color: #20c997;
+}
+.btn-primary:hover {
+  background-color: #1baa80;
+  border-color: #1baa80;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #1baa80;
+  border-color: #1baa80;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  background-color: #1baa80;
+  border-color: #1baa80;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  color: #20c997;
+  border-color: #20c997;
+}
+.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
+  background-color: #20c997;
+  border-color: #20c997;
+  color: #fff;
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
+  background-color: #20c997;
+}
+
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before {
+  background-color: #20c997;
+  border-color: #20c997;
+}
+
+.list-group-item.active {
+  background-color: #20c997;
+  border-color: #20c997;
+}
+
+.page-link {
+  color: #20c997;
+}
+.page-link:hover {
+  color: #1baa80;
+}

development/examples/example3/build/assets/css/color-yellow.css

+/*============================
+		COLOR Yellow
+==============================*/
+::selection {
+  background: #ffc107;
+}
+
+a, a:focus {
+  color: #ffc107;
+}
+
+a:hover, a:active {
+  color: #f7b900;
+}
+
+.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li > a.active:not(.btn) {
+  color: #ffc107;
+}
+.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
+  color: #ffc107;
+}
+.primary-menu.navbar-line-under-text ul.navbar-nav > li > a:not(.btn):after {
+  border-color: #ffc107;
+}
+
+/*=== Side Navigation ===*/
+.idocs-navigation .nav .nav .nav-item .nav-link.active:after, .idocs-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after {
+  border-color: #ffc107;
+}
+
+/* Accordion & Toggle */
+.accordion .card-header a:hover.collapsed {
+  color: #ffc107 !important;
+}
+.accordion:not(.accordion-alternate) .card-header a {
+  background-color: #ffc107;
+  color: #fff;
+}
+
+/* Nav */
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover {
+  color: #ffc107;
+}
+
+.nav-tabs .nav-item .nav-link.active {
+  color: #0c2f55;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+  background-color: #ffc107;
+}
+.nav-tabs .nav-item .nav-link:not(.active):hover {
+  color: #ffc107;
+}
+.nav-tabs.flex-column .nav-item .nav-link.active {
+  color: #ffc107;
+}
+
+.nav-pills .nav-link:not(.active):hover {
+  color: #ffc107;
+}
+
+#footer .nav .nav-item .nav-link:focus {
+  color: #ffc107;
+}
+#footer .nav .nav-link:hover {
+  color: #ffc107;
+}
+#footer .footer-copyright .nav .nav-link:hover {
+  color: #ffc107;
+}
+
+/* Back to Top */
+#back-to-top:hover {
+  background-color: #ffc107;
+}
+
+/* Extras */
+.bg-primary, .badge-primary {
+  background-color: #ffc107 !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+  color: #ffc107 !important;
+}
+
+.btn-link:hover {
+  color: #f7b900 !important;
+}
+
+.text-muted {
+  color: #8e9a9d !important;
+}
+
+.text-light {
+  color: #dee3e4 !important;
+}
+
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+  background-color: #f7b900 !important;
+}
+
+.border-primary {
+  border-color: #ffc107 !important;
+}
+
+.btn-primary {
+  background-color: #ffc107;
+  border-color: #ffc107;
+}
+.btn-primary:hover {
+  background-color: #f7b900;
+  border-color: #f7b900;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #f7b900;
+  border-color: #f7b900;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  background-color: #f7b900;
+  border-color: #f7b900;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  color: #ffc107;
+  border-color: #ffc107;
+}
+.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
+  background-color: #ffc107;
+  border-color: #ffc107;
+  color: #fff;
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
+  background-color: #ffc107;
+}
+
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before {
+  background-color: #ffc107;
+  border-color: #ffc107;
+}
+
+.list-group-item.active {
+  background-color: #ffc107;
+  border-color: #ffc107;
+}
+
+.page-link {
+  color: #ffc107;
+}
+.page-link:hover {
+  color: #f7b900;
+}

development/examples/example3/build/assets/js/theme.js

+/*
+================================================================
+* Template:  	 iDocs - One Page Documentation HTML Template
+* Written by: 	 Harnish Design - (http://www.harnishdesign.net)
+* Description:   Main Custom Script File
+================================================================
+*/
+
+
+(function ($) {
+	"use strict";
+
+// Preloader
+$(window).on('load', function () {
+	$('.lds-ellipsis').fadeOut(); // will first fade out the loading animation
+	$('.preloader').delay(333).fadeOut('slow'); // will fade out the white DIV that covers the website.
+	$('body').delay(333);
+});
+
+/*-------------------------------
+    Primary Menu
+--------------------------------- */
+
+// Dropdown show on hover
+$('.primary-menu ul.navbar-nav li.dropdown, .login-signup ul.navbar-nav li.dropdown').on("mouseover", function() {
+	if ($(window).width() > 991) {
+		$(this).find('> .dropdown-menu').stop().slideDown('fast');
+		$(this).bind('mouseleave', function() {
+		$(this).find('> .dropdown-menu').stop().css('display', 'none'); 
+		});
+	}
+});
+
+// When dropdown going off to the out of the screen.
+$('.primary-menu ul.navbar-nav .dropdown-menu').each(function() {
+		var menu = $('#header .container-fluid').offset();
+		var dropdown = $(this).parent().offset();
+
+		var i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#header .container-fluid').outerWidth());
+
+		if (i > 0) {
+			$(this).css('margin-left', '-' + (i + 5) + 'px');
+		}
+	});
+$(function () {
+    $(".dropdown li").on('mouseenter mouseleave', function (e) {
+		if ($(window).width() > 991) {
+            var elm = $('.dropdown-menu', this);
+            var off = elm.offset();
+            var l = off.left;
+            var w = elm.width();
+            var docW = $(window).width();
+            var isEntirelyVisible = (l + w + 30 <= docW);
+            if (!isEntirelyVisible) {
+                $(elm).addClass('dropdown-menu-right');
+            } else {
+                $(elm).removeClass('dropdown-menu-right');
+            }
+			}
+    });
+});
+
+// DropDown Arrow
+$('.primary-menu ul.navbar-nav').find('a.dropdown-toggle').append($('<i />').addClass('arrow'));
+
+
+// Mobile Collapse Nav
+$('.primary-menu .navbar-nav .dropdown-toggle[href="#"], .primary-menu .dropdown-toggle[href!="#"] .arrow').on('click', function(e) {
+	if ($(window).width() < 991) {
+        e.preventDefault();
+        var $parentli = $(this).closest('li');
+        $parentli.siblings('li').find('.dropdown-menu:visible').slideUp();
+        $parentli.find('> .dropdown-menu').stop().slideToggle();
+        $parentli.siblings('li').find('a .arrow.show').toggleClass('show');
+		$parentli.find('> a .arrow').toggleClass('show');
+	}
+});
+
+
+// Mobile Menu
+$('.navbar-toggler').on('click', function() {
+	$(this).toggleClass('show');
+});
+
+
+/*------------------------
+   Side Navigation
+-------------------------- */
+
+$('#sidebarCollapse').on('click', function () {
+	$('#sidebarCollapse span:nth-child(3)').toggleClass('w-50');
+	$('.idocs-navigation').toggleClass('active');
+});
+
+
+/*------------------------
+   Sections Scroll
+-------------------------- */
+
+$('.smooth-scroll,.idocs-navigation a').on('click', function() {
+	event.preventDefault();
+    var sectionTo = $(this).attr('href');
+	$('html, body').stop().animate({
+      scrollTop: $(sectionTo).offset().top - 120}, 1000, 'easeInOutExpo');
+});
+
+/*-----------------------------
+    Magnific Popup
+------------------------------- */
+
+// Image on Modal
+$('.popup-img').each(function() {
+$(this).magnificPopup({
+	type: "image",
+	tLoading: '<div class="preloader"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div>',
+    closeOnContentClick: !0,
+    mainClass: "mfp-fade",
+	
+});
+});
+
+// YouTube/Viemo Video & Gmaps
+$('.popup-youtube, .popup-vimeo, .popup-gmaps').each(function() {
+$(this).magnificPopup({
+        type: 'iframe',
+		mainClass: 'mfp-fade',
+});
+});
+
+
+/*------------------------
+   Highlight Js
+-------------------------- */
+
+hljs.initHighlightingOnLoad();
+
+
+/*------------------------
+   tooltips
+-------------------------- */
+$('[data-toggle=\'tooltip\']').tooltip({container: 'body'});
+
+
+/*------------------------
+   Scroll to top
+-------------------------- */
+$(function () {
+		$(window).on('scroll', function(){
+			if ($(this).scrollTop() > 400) {
+				$('#back-to-top').fadeIn();
+			} else {
+				$('#back-to-top').fadeOut();
+			}
+		});
+		});
+$('#back-to-top').on("click", function() {
+	$('html, body').animate({scrollTop:0}, 'slow');
+	return false;
+});
+
+
+})(jQuery)
\ No newline at end of file

development/examples/example3/build/assets/sass/_elements.scss

+/* =================================== */
+/*  5. Elements
+/* =================================== */
+
+/*=== 5.1 List Style ===*/
+
+.list-style-1 > li {
+  position: relative;
+  list-style-type: none;
+  line-height: 24px;
+  &:after {
+    content: " ";
+    position: absolute;
+    top: 12px;
+    left: -15px;
+    border-color: #000;
+    border-top: 1px solid;
+    border-right: 1px solid;
+    width: 6px;
+    height: 6px;
+    -webkit-transform: translate(-50%, -50%) rotate(45deg);
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+.list-style-2{padding:0;}
+
+.list-style-2 > li {
+  list-style-type: none;
+  border-bottom: 1px solid #eaeaea;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.list-style-2.list-style-light > li {
+  border-bottom: 1px solid rgba(250,250,250,0.12);
+}
+
+/*=== 5.2 Changelog ===*/
+
+.changelog {
+  list-style: none;
+  padding: 0;
+  .badge {
+    width: 90px;
+    margin-right: 10px;
+    border-radius: .20rem;
+    text-transform: uppercase;
+  }
+  li {
+    line-height: 1.8;
+  }
+}
+
+
+/*=== 5.3 Accordion & Toggle ===*/
+.accordion {
+  .card {
+    border: none;
+    margin-bottom: 16px;
+    margin-bottom: 1rem;
+    background-color: transparent;
+  }
+  .card-header {
+    padding: 0;
+    border: none;
+    background: none;
+    a {
+      font-size: 16px;
+	  font-weight:normal;
+      padding: 1rem 1.25rem 1rem 2.25rem;
+      display: block;
+      border-radius: 4px;
+      position: relative;
+	 &:hover{
+		text-decoration:none;
+	}
+	 &:hover.collapsed {
+		color: $primary-color!important;
+	}
+    }
+  }
+  &:not(.accordion-alternate) .card-header a {
+    background-color: $primary-color;
+    color: #fff;
+    &.collapsed {
+      background-color: #f1f2f4;
+      color: #4c4d4d;
+    }
+	
+  }
+  .card-header a {
+    &:before {
+      position: absolute;
+      content: " ";
+      left: 20px;
+      top: calc(50% + 2px);
+      width: 9px;
+      height: 9px;
+      border-color: #CCC;
+      border-top: 2px solid;
+      border-right: 2px solid;
+      -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+      transform: translate(-50%, -50%) rotate(-45deg);
+	  @include transition(all 0.2s ease);
+	  -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+    }
+    &.collapsed:before {
+      top: calc(50% - 2px);
+      -webkit-transform: translate(-50%, -50%) rotate(135deg);
+      transform: translate(-50%, -50%) rotate(135deg);
+    }
+  }
+  .card-body {
+    line-height: 26px;
+  }
+  &.arrow-right .card-header a{
+		padding-left:1.25rem;
+    &:before {
+		right: 15px;
+		left: auto;
+	}
+  }
+  &.accordion-alternate {
+    .card {
+      margin: 0;
+    }
+    .card-header a {
+      padding-left: 1.40rem;
+      border-top: 1px solid #e4e9ec;
+      border-radius: 0px;
+    }
+    .card:first-of-type .card-header a {
+      border-top: 0px;
+    }
+    .card-header a {
+      &:before {
+        left: 6px;
+      }
+      &.collapsed {
+        color: #4c4d4d;
+      }
+    }
+    .card-body {
+      padding: 0rem 0 1rem 1.25rem;
+    }
+	&.arrow-right .card-header a{
+		padding-left:0;
+    &:before {
+		right: 0px;
+		left: auto;
+	}
+  }
+
+  }
+  &.toggle .card-header a {
+    &:before {
+      content: "-";
+      border: none;
+      font-size: 20px;
+      height: auto;
+      top: calc(50% + 2px);
+      width: auto;
+	  -webkit-transform: translate(-50%, -50%) rotate(180deg);
+      transform: translate(-50%, -50%) rotate(180deg);
+    }
+    &.collapsed:before {
+      content: "+";
+	  top: calc(50% - 1px);
+	  -webkit-transform: translate(-50%, -50%) rotate(0deg);
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+  }
+  &.accordion-alternate.style-2 {
+    .card-header a {
+      &:before {
+        right: 2px;
+        left: auto;
+		-webkit-transform: translate(-50%, -50%) rotate(135deg);
+        transform: translate(-50%, -50%) rotate(135deg);
+        top: 50%;
+      }
+      &.collapsed:before {
+	  	-webkit-transform: translate(-50%, -50%) rotate(45deg);
+        transform: translate(-50%, -50%) rotate(45deg);
+      }
+      padding-left: 0px;
+    }
+    .card-body {
+      padding-left: 0px;
+    }
+  }
+  &.accordion-alternate.popularRoutes {
+	.card-header {
+	  .nav {
+		margin-top: 3px;
+		a {
+		  font-size: 14px;
+		}
+	  }
+	  a {
+		padding: 0px 8px 0px 0px;
+		border: none;
+		font-size: inherit;
+		&:before {
+		  content: none;
+		}
+	  }
+	  h5 {
+		cursor: pointer;
+		&:before {
+		  position: absolute;
+		  content: " ";
+		  right: 0px;
+		  top: 24px;
+		  width: 10px;
+		  height: 10px;
+		  opacity: 0.6;
+		  border-top: 2px solid;
+		  border-right: 2px solid;
+		  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+		  transform: translate(-50%, -50%) rotate(-45deg);
+		  -webkit-transition: all 0.2s ease;
+		  transition: all 0.2s ease;
+		  -webkit-backface-visibility: hidden;
+		  backface-visibility: hidden;
+		}
+		&.collapsed:before {
+		  top: 24px;
+		  -webkit-transform: translate(-50%, -50%) rotate(135deg);
+		  transform: translate(-50%, -50%) rotate(135deg);
+		}
+	  }
+	}
+	.card-body {
+	  padding: 0;
+	}
+	.card {
+	  border-bottom: 2px solid #e4e9ec;
+	  padding: 15px 0px;
+	}
+	.routes-list {
+	  margin: 1rem 0px 0px 0px;
+	  padding: 0px;
+	  list-style: none;
+	  a {
+		color: inherit;
+		display: -ms-flexbox !important;
+		display: flex !important;
+		-ms-flex-align: center !important;
+		align-items: center !important;
+		&:hover {
+		  color: #0071cc;
+		  text-decoration: underline;
+		}
+	  }
+	}
+  }
+}
+
+/* 5.4 Nav */
+
+.nav .nav-item .nav-link{color: #222222;}
+.nav.nav-light .nav-item .nav-link{color: #ddd;}
+.nav:not(.nav-pills) .nav-item .nav-link.active, .nav:not(.nav-pills) .nav-item .nav-link:hover{color: $primary-color;}
+
+
+.nav-pills .nav-link:not(.active):hover{color: $primary-color;}
+.nav-pills .nav-link.active,.nav-pills.nav-light .nav-link.active, .nav-pills .show > .nav-link{color:#fff;}
+
+.nav.nav-separator .nav-item .nav-link{position:relative;}
+.nav.nav-separator .nav-item + .nav-item .nav-link:after{
+		height: 14px;
+        width: 1px;
+        content: ' ';
+        background-color: rgba(0,0,0,0.2);
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 0;
+		@include translateY(-7px);
+}
+.nav.nav-separator.nav-separator-light .nav-item + .nav-item .nav-link:after{
+background-color: rgba(250,250,250,0.2);
+}
+
+.nav.nav-sm .nav-item .nav-link{font-size:14px;}
+
+
+/*=== 5.5 Tabs ===*/
+
+.nav-tabs {
+  border-bottom: 1px solid #d7dee3;
+  .nav-item .nav-link {
+	border:0;
+    background: transparent;
+    
+    position: relative;
+    border-radius: 0;
+	padding:0.6rem 1rem;
+    color: #7b8084;
+	white-space: nowrap !important;
+    &.active {
+      &:after {
+        height: 2px;
+        width: 100%;
+        content: ' ';
+        background-color: $primary-color;
+        display: block;
+        position: absolute;
+        bottom: -3px;
+        left: 0;
+		@include translateY(-3px);
+      }
+      color: #0c2f55;
+    }
+	&:not(.active):hover {
+      color: $primary-color;
+    }
+  }
+  &.flex-column {
+    border-right: 1px solid #d7dee3;
+    border-bottom: 0px;
+    padding: 1.5rem 0;
+    .nav-item {
+      .nav-link {
+        border: 1px solid #d7dee3;
+        border-right: 0px;
+        background-color: #f6f7f8;
+        font-size: 14px;
+        padding: 0.75rem 1rem;
+        color: #535b61;
+      }
+      &:first-of-type .nav-link {
+        border-top-left-radius: 4px;
+      }
+      &:last-of-type .nav-link {
+        border-bottom-left-radius: 4px;
+      }
+      .nav-link.active {
+        &:after {
+          height: 100%;
+          width: 2px;
+          background: #fff;
+          right: -1px;
+          left: auto;
+        }
+        background-color: transparent;
+        color: $primary-color;
+      }
+    }
+  }
+}
+
+.nav-tabs:not(.flex-column) {
+  .nav-item {
+    margin-bottom: 0px;
+  }
+  flex-wrap: nowrap;
+  overflow: hidden;
+  overflow-x: auto;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  -webkit-overflow-scrolling: touch;
+}
+
+
+
+@include media-breakpoint-down(xs) {
+  .nav-tabs .nav-item .nav-link {
+	padding-left: 0px;
+	padding-right: 0px;
+	margin-right: 10px;
+	font-size: 0.875rem;
+  }
+}
+
+
+/*=== 5.6 Popup Img ===*/
+.popup-img img{@include transition(all 0.2s ease-in-out);}
+.popup-img:hover img{
+	opacity:0.8;
+	cursor: -webkit-zoom-in;
+    cursor: -moz-zoom-in;
+    cursor: zoom-in;
+}
+
+
+/*=== 5.7 Featured Box ===*/
+.featured-box {
+  box-sizing: border-box;
+  position: relative;
+  h3, h4 {
+  	font-size: 1.25rem;
+	font-size: 20px;
+    margin-bottom: 10px;
+    font-weight: 500;
+  }
+  &:not(.style-5) .featured-box-icon {
+    display: inline-block;
+    font-size: 48px;
+	min-width: 55px;
+    min-height: 55px;
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0.8rem;
+    color: #4c4d4d;
+    border-radius: 0;
+  }
+  &.style-1, &.style-2, &.style-3 {
+    padding-left: 50px;
+    padding-top: 8px;
+  }
+  &.style-1 .featured-box-icon, &.style-2 .featured-box-icon, &.style-3 .featured-box-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-bottom: 0;
+    font-size: 30px;
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
+    text-align: center;
+  }
+  &.style-2 p {
+    margin-left: -50px;
+  }
+  &.style-3 {
+    padding-left: 90px;
+    padding-top: 0px;
+    .featured-box-icon {
+      width: 70px;
+      height: 70px;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+    }
+  }
+  &.style-4 {
+    text-align: center;
+    .featured-box-icon {
+      margin: 0 auto 24px;
+      margin: 0 auto 1.5rem;
+      width: 120px;
+      height: 120px;
+      text-align: center;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+	  -ms-flex-pack: center;
+	  justify-content: center;
+	  @include box-shadow(0px 0px 50px rgba(0, 0, 0, 0.03));
+    }
+  }
+  
+  &.style-5 {
+  text-align: center;
+  background: #fff;
+  border: 1px solid #f0f2f3;
+  @include box-shadow(0px 2px 5px rgba(0, 0, 0, 0.05));
+  @include transition(all 0.3s ease-in-out);
+  &:hover {
+    border: 1px solid #ebeded;
+	@include box-shadow(0px 5px 1.5rem rgba(0, 0, 0, 0.15));
+  }
+  h3 {
+    background: #f1f5f6;
+    font-size: 16px;
+    padding: 8px 0;
+    margin-bottom: 0px;
+  }
+  .featured-box-icon {
+    font-size: 50px;
+    margin: 44px 0px;
+  }
+}
+}
+
+
+@mixin featured-box-reverse {
+	text-align:right;
+	&.style-1, &.style-2{
+		padding-right:50px;
+		padding-left:0px;
+		.featured-box-icon{
+			left:auto;
+			right:0px;
+		}
+	}
+	&.style-2 p{
+		margin-right: -50px;
+		margin-left:0;
+	}
+	&.style-3{
+		padding-left:0;
+		padding-right:90px;
+		.featured-box-icon{
+			left:auto;
+			right:0px;
+		}
+	}
+}
+
+.featured-box.featured-box-reverse{
+	@include featured-box-reverse;
+}
+
+@include media-breakpoint-up(xs) {
+	.featured-box.featured-box-reverse-sm{
+		@include featured-box-reverse;
+	}
+}
+
+@include media-breakpoint-up(sm) {
+	.featured-box.featured-box-reverse-md{
+		@include featured-box-reverse;
+	}
+}
+
+@include media-breakpoint-up(md) {
+	.featured-box.featured-box-reverse-lg{
+		@include featured-box-reverse;
+	}
+}
+@include media-breakpoint-up(lg) {
+	.featured-box.featured-box-reverse-xl{
+		@include featured-box-reverse;
+	}
+}
\ No newline at end of file

development/examples/example3/build/assets/sass/_extras.scss

+/* =================================== */
+/*  Extras
+/* =================================== */
+
+/* Bootstrap Specific */
+
+.form-control, .custom-select {
+  border-color: #dae1e3;
+  font-size: 16px;
+  color: #656565;
+}
+
+.form-control:not(.form-control-sm) {
+  padding: .810rem .96rem;
+  height:inherit;
+}
+
+.form-control-sm{font-size:14px;}
+
+.icon-inside {
+  position: absolute;
+  right: 15px;
+  top: calc(50% - 11px);
+  pointer-events: none;
+  font-size: 18px;
+  font-size: 1.125rem;
+  color: #c4c3c3;
+  z-index:3;
+}
+.form-control-sm + .icon-inside {
+  font-size: 0.875rem !important;
+  font-size: 14px;
+  top: calc(50% - 13px);
+}
+
+select.form-control:not([size]):not([multiple]):not(.form-control-sm) {
+  height: auto;
+  padding-top: .700rem;
+  padding-bottom: .700rem;
+}
+.custom-select:not(.custom-select-sm){
+  height:calc(3.05rem + 2px);
+  padding-top: .700rem;
+  padding-bottom: .700rem;}
+.col-form-label-sm{font-size:13px;}
+.custom-select-sm{padding-left:5px!important; font-size:14px;}
+.custom-select:not(.custom-select-sm).border-0{height:3.00rem;}
+
+.form-control:focus, .custom-select:focus{
+  @include box-shadow(0 0 5px rgba(128, 189, 255, 0.5));
+}
+.form-control:focus[readonly]{box-shadow:none;}
+
+.input-group-text {
+  border-color: #dae1e3;
+  background-color:#f1f5f6;
+  color: #656565;
+}
+
+.form-control {
+  &::-webkit-input-placeholder {
+    color: #b1b4b6;
+  }
+  &:-moz-placeholder {
+    /* FF 4-18 */
+    color: #b1b4b6;
+  }
+  &::-moz-placeholder {
+    /* FF 19+ */
+    color: #b1b4b6;
+  }
+  &:-ms-input-placeholder, &::-ms-input-placeholder {
+    /* IE 10+ */
+    color: #b1b4b6;
+  }
+}
+
+/* Form Dark */
+.form-dark {
+  .form-control, .custom-select {
+	border-color: #232a31;
+	background:#232a31;
+	color: #fff;
+  }
+  .form-control:focus{border-color: #80bdff!important;}
+  .form-control {
+	&::-webkit-input-placeholder {
+	  color: #777b7f;
+	}
+	&:-moz-placeholder {
+	  /* FF 4-18 */
+	  color: #777b7f;
+	}
+	&::-moz-placeholder {
+	  /* FF 19+ */
+	  color: #777b7f;
+	}
+	&:-ms-input-placeholder, &::-ms-input-placeholder {
+	  /* IE 10+ */
+	  color: #777b7f;
+	}
+  }
+  .custom-select {
+    color: #777b7f;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='rgba(250,250,250,0.3)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
+    background-size: 13px 15px;
+	border-color: #232a31;
+	background-color:#232a31;
+  }
+  .icon-inside {
+	color: #777b7f;
+  }
+}
+
+/*  Input with only bottom border  */
+.form-border {
+  .form-control {
+    background-color: transparent;
+    border: none;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+    border-radius: 0px;
+    padding-left: 0px!important;
+    color: rgba(0, 0, 0, 1);
+	&::-webkit-input-placeholder {
+	  color: rgba(0, 0, 0, 0.4);
+	}
+	&:-moz-placeholder {
+	  /* FF 4-18 */
+	  color: rgba(0, 0, 0, 0.4);
+	}
+	&::-moz-placeholder {
+	  /* FF 19+ */
+	  color: rgba(0, 0, 0, 0.4);
+	}
+	&:-ms-input-placeholder, &::-ms-input-placeholder {
+	  /* IE 10+ */
+	  color: rgba(0, 0, 0, 0.4);
+	}
+  }
+  .custom-select {
+    background-color: transparent;
+    border: none;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+    border-radius: 0px;
+    padding-left: 0px;
+    color: rgba(0, 0, 0, 0.4);
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='rgba(0,0,0,0.3)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
+    background-size: 13px 15px;
+  }
+  .form-control:focus, .custom-select:focus {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+	border-bottom: 2px solid rgba(0, 0, 0, 0.7);
+  }
+  .form-control:not(output):-moz-ui-invalid, .custom-select:not(output):-moz-ui-invalid {
+    &:not(:focus), &:-moz-focusring:not(:focus) {
+      border-bottom: 2px solid #b00708;
+      box-shadow: none;
+      -webkit-box-shadow: none;
+    }
+  }
+  .icon-inside {
+    color: rgba(0, 0, 0, 0.25);
+  }
+  select option {
+    color: #666;
+  }
+}
+
+.form-border-light {
+  .form-control {
+	border-bottom: 2px solid rgba(250, 250, 250, 0.3);
+	color: rgba(250, 250, 250, 1);
+	&::-webkit-input-placeholder {
+	  color: rgba(250, 250, 250, 0.7);
+	}
+	&:-moz-placeholder {
+	  /* FF 4-18 */
+	  color: rgba(250, 250, 250, 0.7);
+	}
+	&::-moz-placeholder {
+	  /* FF 19+ */
+	  color: rgba(250, 250, 250, 0.7);
+	}
+	&:-ms-input-placeholder, &::-ms-input-placeholder {
+	  /* IE 10+ */
+	  color: rgba(250, 250, 250, 0.7);
+	}
+  }
+  .custom-select {
+    border-bottom: 2px solid rgba(250, 250, 250, 0.3);
+    color: rgba(250, 250, 250, 1);
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='rgba(250,250,250,0.6)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
+	background-size: 13px 15px;
+  }
+  .form-control:focus, .custom-select:focus {
+	border-bottom: 2px solid rgba(250, 250, 250, 0.8);
+  }
+  .icon-inside {
+    color: #999;
+  }
+  select option {
+    color: #333;
+  }
+}
+
+.input-group-append .btn, .input-group-prepend .btn {
+  @include box-shadow(none);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.input-group-append .btn:hover, .input-group-prepend .btn:hover {
+  @include box-shadow(none);
+}
+
+@include media-breakpoint-down(xs) {
+  .input-group > {
+  .input-group-append > .btn, .input-group-prepend > .btn {
+    padding: 0 0.75rem;
+  }
+}
+}
+
+.bg-primary, .badge-primary {
+	background-color: $primary-color !important;
+}
+.bg-secondary {
+	background-color: $secondary-color !important;
+}
+
+.text-primary, .btn-light, .btn-outline-light:hover, .btn-link, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
+	color: $primary-color !important;
+}
+
+.btn-link:hover {
+	color: $primary-color-hover !important;
+}
+.text-secondary{
+	color: $secondary-color !important;
+}
+
+.text-light{
+	color:#dee3e4!important;
+}
+.text-body{
+	color: $text-color !important;
+}
+a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover{background-color: $primary-color-hover!important;}
+
+.border-primary {
+	border-color: $primary-color !important;
+}
+.border-secondary {
+	border-color: $secondary-color !important;
+}
+
+.btn-primary{
+  background-color: $primary-color;
+  border-color: $primary-color;
+  &:hover {
+    background-color: $primary-color-hover;
+    border-color: $primary-color-hover;
+  }
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active{
+  background-color: $primary-color-hover;
+  border-color: $primary-color-hover;
+  
+}
+
+.btn-primary.focus, .btn-primary:focus{
+	background-color: $primary-color-hover;
+    border-color: $primary-color-hover;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus{
+	@include box-shadow(none);
+}
+
+.btn-secondary {
+  background-color: $secondary-color;
+  border-color: $secondary-color;
+}
+
+.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active{
+  color: $primary-color;
+  border-color: $primary-color;
+  &:hover {
+    background-color: $primary-color;
+    border-color: $primary-color;
+	color: #fff;
+  }
+}
+
+.btn-outline-secondary{
+  color: $secondary-color;
+  border-color: $secondary-color;
+  &:hover {
+    background-color: $secondary-color;
+    border-color: $secondary-color;
+	color: #fff;
+  }
+}
+
+.progress-bar,
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active{
+	background-color: $primary-color;
+}
+.page-item.active .page-link,
+.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
+.custom-control-input:checked ~ .custom-control-label:before{
+	background-color: $primary-color;
+	border-color: $primary-color;
+}
+.list-group-item.active{
+	background-color: $primary-color;
+	border-color: $primary-color;
+}
+.page-link {
+  color: $primary-color;
+  &:hover {
+    color: $primary-color-hover;
+  }
+}
+
+/* Pagination */
+
+.page-link {
+  border: none;
+  border-radius: 0.25rem;
+  margin: 0 0.22rem;
+  font-size: 16px;
+  font-size: 1rem;
+  &:hover {
+    background-color: #e9eff0;
+  }
+}
+
+/* Vertical Multilple input group */
+
+.vertical-input-group .input-group {
+  &:first-child {
+    padding-bottom: 0;
+    * {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  &:last-child {
+    padding-top: 0;
+    * {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+  &:not(:last-child):not(:first-child) {
+    padding-top: 0;
+    padding-bottom: 0;
+    * {
+      border-radius: 0;
+    }
+  }
+  &:not(:first-child) * {
+    border-top: 0;
+  }
+}
+
+/* styles-switcher */
+#styles-switcher {
+  background: #fff;
+  width: 202px;
+  position: fixed;
+  top: 35%;
+  z-index: 99;
+  padding: 20px;
+  left: -202px;
+  ul {
+    padding: 0;
+    li {
+      list-style-type: none;
+      width: 25px;
+      height: 25px;
+      margin: 4px 2px;
+      border-radius: 50%;
+      display: inline-block;
+      cursor: pointer;
+      transition: all .2s ease-in-out;
+      &.blue {
+        background: #007bff;
+      }
+      &.brown {
+        background: #795548;
+      }
+      &.purple {
+        background: #6f42c1;
+      }
+      &.indigo {
+        background: #6610f2;
+      }
+      &.red {
+        background: #dc3545;
+      }
+      &.orange {
+        background: #fd7e14;
+      }
+      &.yellow {
+        background: #ffc107;
+      }
+      &.green {
+        background: #28a745;
+      }
+      &.teal {
+        background: #20c997;
+      }
+      &.cyan {
+        background: #17a2b8;
+      }
+      &.active {
+        transform: scale(0.7);
+		cursor:default;
+      }
+    }
+  }
+  .switcher-toggle {
+    position: absolute;
+    background: #333;
+    color: #fff;
+    font-size: 1.25rem;
+    border-radius: 0px 4px 4px 0;
+    right: -40px;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+  }
+  #reset-color{background: #e83e8c;}
+}
+
+input:-internal-autofill-selected {
+    background-color: transparent;
+}
+
+#styles-switcher.right{left:auto; right: -202px;}
+#styles-switcher.right .switcher-toggle{right: auto; left: -40px; border-radius: 4px 0px 0px 4px;}
\ No newline at end of file

development/examples/example3/build/assets/sass/_footer.scss

+/* =================================== */
+/*  6. Footer
+/* =================================== */
+
+#footer {
+  background: #fff;
+  color: #252b33;
+  margin-left:260px;
+  padding: 66px 0px;
+  padding: 4.125rem 0;
+  .nav {
+    .nav-item {
+      display: inline-block;
+      line-height: 12px;
+      margin: 0;
+      .nav-link {
+        color: #252b33;
+        -webkit-transition: all 0.2s ease;
+        transition: all 0.2s ease;
+        &:focus {
+          color: $primary-color;
+          -webkit-transition: all 0.2s ease;
+          transition: all 0.2s ease;
+        }
+      }
+	  &:first-child .nav-link {
+        padding-left: 0px;
+      }
+      &:last-child .nav-link{
+        padding-right: 0px;
+      }
+    }
+    .nav-link:hover {
+      color: $primary-color;
+      -webkit-transition: all 0.2s ease;
+      transition: all 0.2s ease;
+    }
+  }
+  .footer-copyright {
+    border-top: 1px solid #e2e8ea;
+    padding: 0px 0px;
+    color: #67727c;
+    .nav {
+      .nav-item .nav-link {
+        color: #67727c;
+      }
+      .nav-link:hover {
+        color: $primary-color;
+        -webkit-transition: all 0.2s ease;
+        transition: all 0.2s ease;
+      }
+    }
+  }
+  .nav.flex-column .nav-item {
+    padding: 0px;
+    .nav-link {
+      margin: 0.7rem 0px;
+    }
+  }
+  &.footer-text-light {
+    color: rgba(250, 250, 250, 0.8);
+    .nav .nav-item .nav-link {
+      color: rgba(250, 250, 250, 0.8);
+      &:hover {
+        color: rgba(250, 250, 250, 1);
+      }
+    }
+    .footer-copyright {
+      border-color: rgba(250, 250, 250, 0.15);
+      color: rgba(250, 250, 250, 0.5);
+    }
+    &:not(.bg-primary) .social-icons-light.social-icons li a {
+      color: rgba(250, 250, 250, 0.8);
+      &:hover {
+        color: rgba(250, 250, 250, 1);
+      }
+    }
+    &.bg-primary {
+      color: #fff;
+      .nav .nav-item .nav-link {
+        color: #fff;
+        &:hover {
+          color: rgba(250, 250, 250, 0.7);
+        }
+      }
+      .footer-copyright {
+        border-color: rgba(250, 250, 250, 0.15);
+        color: rgba(250, 250, 250, 0.9);
+      }
+      :not(.social-icons) a {
+        color: #fff;
+        &:hover {
+          color: rgba(250, 250, 250, 0.7);
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+#footer {
+	margin-left:0px;
+}
+}
+
+
+/*=== 6.1 Social Icons ===*/
+.social-icons {
+  margin: 0;
+  padding: 0;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  list-style: none;
+  li {
+    margin: 0px 6px;
+    padding: 0;
+    overflow: visible;
+    a {
+      display: block;
+      height: 26px;
+      line-height: 26px;
+      width: 26px;
+      font-size: 18px;
+      text-align: center;
+      color: #4d555a;
+      text-decoration: none;
+	  @include transition(all 0.2s ease);
+    }
+    i {
+      line-height: inherit;
+    }
+  }
+  &.social-icons-sm li{
+    margin: 0px 4px;
+  }
+  &.social-icons-sm li a {
+    font-size: 15px;
+	width:22px;
+  }
+  &.social-icons-lg li a {
+    width: 34px;
+    height: 34px;
+    line-height:34px;
+    font-size: 22px;
+  }
+  &.social-icons-light li a {
+    color: #eee;
+  }
+  &.social-icons-muted li a {
+    color: #aab1b8;
+  }
+  li:hover {
+    a {
+      color: #999;
+    }
+  }
+}
+
+
+/*=== 6.2 Back to Top ===*/
+#back-to-top {
+  display: none;
+  position: fixed;
+  z-index: 1030;
+  bottom: 8px;
+  right: 10px;
+  background-color: rgba(0, 0, 0, 0.22);
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+  width: 36px;
+  height: 36px;
+  line-height: 34px;
+  border-radius:3px;
+  @include transition(all 0.3s ease-in-out);
+  @include box-shadow(0px 5px 15px rgba(0, 0, 0, 0.15));
+  &:hover {
+    background-color: $primary-color;
+	@include box-shadow(0px 5px 15px rgba(0, 0, 0, 0.25));
+	@include transition(all 0.3s ease-in-out);
+  }
+}
+
+@include media-breakpoint-down(xs) {
+  #back-to-top {z-index: 1029;}
+}
\ No newline at end of file

development/examples/example3/build/assets/sass/_mixins.scss

+//---------- @mixins ----------//
+
+@mixin box-shadow($val...) {
+	-webkit-box-shadow: ($val);
+	box-shadow: ($val);
+}
+
+@mixin transition($val...) {
+	-webkit-transition: ($val);
+	transition: ($val);
+}
+
+@mixin translateY($val...) {
+	-webkit-transform: translateY($val);
+	transform: translateY($val);
+}
+
+@mixin translateX($val...) {
+	-webkit-transform: translateX($val);
+	transform: translateX($val);
+}
+
+@mixin rotate($val){
+	-webkit-transform: rotate($val);
+	transform: rotate($val);
+}
+
+@mixin scale($val){
+	-webkit-transform: scale($val);
+	transform: scale($val);
+}
\ No newline at end of file