1 line
261 KiB
Plaintext
1 line
261 KiB
Plaintext
{"version":3,"file":"wizard-4.css","sources":["pages/wizard/wizard-4.scss","_init.scss","base/functions/_get.scss","base/functions/_math.scss","base/functions/_valueif.scss","base/functions/_theme-colors.scss","base/mixins/_attr.scss","base/mixins/_browsers.scss","base/mixins/_fixes.scss","base/mixins/_reset.scss","base/mixins/_placeholder.scss","components/mixins/_tooltip.scss","components/mixins/_buttons.scss","components/mixins/_burger-icon.scss","components/mixins/_checkbox.scss","components/mixins/_radio.scss","components/mixins/_switch.scss","components/mixins/_ki.scss","components/mixins/_symbol.scss","components/mixins/_menu-horizontal.scss","components/mixins/_menu-vertical.scss","components/mixins/_offcanvas.scss","components/mixins/_spinner.scss","components/mixins/_svg-icon.scss","components/mixins/_navi.scss","components/mixins/_label.scss","vendors/plugins/mixins/_perfect-scrollbar.scss","../node_modules/bootstrap-scss/_mixins.scss","../node_modules/bootstrap-scss/vendor/_rfs.scss","../node_modules/bootstrap-scss/mixins/_deprecate.scss","../node_modules/bootstrap-scss/mixins/_breakpoints.scss","../node_modules/bootstrap-scss/mixins/_hover.scss","../node_modules/bootstrap-scss/mixins/_image.scss","../node_modules/bootstrap-scss/mixins/_badge.scss","../node_modules/bootstrap-scss/mixins/_resize.scss","../node_modules/bootstrap-scss/mixins/_screen-reader.scss","../node_modules/bootstrap-scss/mixins/_size.scss","../node_modules/bootstrap-scss/mixins/_reset-text.scss","../node_modules/bootstrap-scss/mixins/_text-emphasis.scss","../node_modules/bootstrap-scss/mixins/_text-hide.scss","../node_modules/bootstrap-scss/mixins/_text-truncate.scss","../node_modules/bootstrap-scss/mixins/_visibility.scss","../node_modules/bootstrap-scss/mixins/_alert.scss","../node_modules/bootstrap-scss/mixins/_buttons.scss","../node_modules/bootstrap-scss/mixins/_caret.scss","../node_modules/bootstrap-scss/mixins/_pagination.scss","../node_modules/bootstrap-scss/mixins/_lists.scss","../node_modules/bootstrap-scss/mixins/_list-group.scss","../node_modules/bootstrap-scss/mixins/_nav-divider.scss","../node_modules/bootstrap-scss/mixins/_forms.scss","../node_modules/bootstrap-scss/mixins/_table-row.scss","../node_modules/bootstrap-scss/mixins/_background-variant.scss","../node_modules/bootstrap-scss/mixins/_border-radius.scss","../node_modules/bootstrap-scss/mixins/_box-shadow.scss","../node_modules/bootstrap-scss/mixins/_gradients.scss","../node_modules/bootstrap-scss/mixins/_transition.scss","../node_modules/bootstrap-scss/mixins/_clearfix.scss","../node_modules/bootstrap-scss/mixins/_grid-framework.scss","../node_modules/bootstrap-scss/mixins/_grid.scss","../node_modules/bootstrap-scss/mixins/_float.scss","components/_variables.demo.scss","components/_variables.bootstrap.scss","components/_variables.custom.scss","vendors/plugins/_variables.scss","layout/_variables.scss"],"sourcesContent":["//\r\n// Wizard 4\r\n// Pages SASS files are compiled into separate css files\r\n//\r\n\r\n// Initialization of global variables, mixins and functions\r\n@import \"../../init\";\r\n\r\n// Base\r\n.wizard.wizard-4 {\r\n\tflex-direction: column;\r\n\r\n\t// Nav\r\n\t.wizard-nav {\r\n\t\t// Steps\r\n\t\t.wizard-steps {\r\n\t\t\tdisplay: flex;\r\n\t\t\talign-items: flex-end;\r\n\t\t\tjustify-content: space-between;\r\n\t\t\tflex-wrap: wrap;\r\n\r\n\t\t\t// Step\r\n\t\t\t.wizard-step {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\talign-items: center;\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\tflex-wrap: wrap;\r\n\t\t\t\tflex: 0 0 calc(25% - 0.25rem);\r\n\t\t\t\twidth: calc(25% - 0.25rem);\r\n\t\t\t\tbackground-color: $gray-100;\r\n\t\t\t\tborder-top-left-radius: 0.5rem;\r\n\t\t\t\tborder-top-right-radius: 0.5rem;\r\n\r\n\t\t\t\t.wizard-wrapper {\r\n\t\t\t\t\tflex: 1;\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t\tflex-wrap: wrap;\r\n\t\t\t\t\tcolor: $dark-75;\r\n\t\t\t\t\tpadding: 2rem 2.5rem;\r\n\r\n\t\t\t\t\t.wizard-number {\r\n\t\t\t\t\t\tfont-size: 1.3rem;\r\n\t\t\t\t\t\tfont-weight: 600;\r\n\t\t\t\t\t\tflex: 0 0 2.75rem;\r\n\t\t\t\t\t\theight: 2.75rem;\r\n\t\t\t\t\t\twidth: 2.75rem;\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\t\tbackground-color: rgba($primary, 0.08);\r\n\t\t\t\t\t\tcolor: $primary;\r\n\t\t\t\t\t\tmargin-right: 1rem;\r\n\t\t\t\t\t\tborder-radius: 0.5rem;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t.wizard-label {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\tflex-direction: column;\r\n\r\n\t\t\t\t\t\t.wizard-title {\r\n\t\t\t\t\t\t\tfont-size: 1.1rem;\r\n\t\t\t\t\t\t\tfont-weight: 600;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&[data-wizard-state=\"current\"] {\r\n\t\t\t\t\tbackground-color: $white;\r\n\r\n\t\t\t\t\t.wizard-wrapper {\r\n\t\t\t\t\t\t.wizard-number {\r\n\t\t\t\t\t\t\tcolor: $white;\r\n\t\t\t\t\t\t\tbackground-color: $primary;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t.wizard-label {\r\n\t\t\t\t\t\t\t.wizard-title {\r\n\t\t\t\t\t\t\t\tcolor: $primary;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Small Desktop Mode\r\n@include media-breakpoint-down(xl) {\r\n\t.wizard.wizard-4 {\r\n\t\t// Nav\r\n\t\t.wizard-nav {\r\n\t\t\t.wizard-steps {\r\n\t\t\t\t.wizard-step {\r\n\t\t\t\t\tflex: 0 0 calc(50% - 0.25rem);\r\n\t\t\t\t\twidth: calc(50% - 0.25rem);\r\n\t\t\t\t\tborder-bottom-left-radius: 0.5rem;\r\n\t\t\t\t\tborder-bottom-right-radius: 0.5rem;\r\n\t\t\t\t\tmargin-bottom: 0.5rem;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Mobile mode\r\n@include media-breakpoint-down(sm) {\r\n\t.wizard.wizard-4 {\r\n\t\t// Nav\r\n\t\t.wizard-nav {\r\n\t\t\t.wizard-steps {\r\n\t\t\t\tflex-direction: column;\r\n\t\t\t\talign-items: flex-start;\r\n\r\n\t\t\t\t.wizard-step {\r\n\t\t\t\t\tflex: 0 0 100%;\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\twidth: 100%;\r\n\r\n\t\t\t\t\t.wizard-wrapper {\r\n\t\t\t\t\t\tjustify-content: flex-start;\r\n\t\t\t\t\t\tflex: 0 0 100%;\r\n\t\t\t\t\t\tpadding: 0.5rem 2rem;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","//\r\n// Main init file of global bootstrap and theme functions, mixins, variables and config\r\n//\r\n\r\n\r\n// Theme functions\r\n@import\r\n \"base/functions/get\",\r\n \"base/functions/math\",\r\n \"base/functions/valueif\",\r\n \"base/functions/theme-colors\";\r\n\r\n// Theme mixins\r\n@import\r\n \"base/mixins/attr\",\r\n \"base/mixins/browsers\",\r\n \"base/mixins/fixes\",\r\n \"base/mixins/reset\",\r\n \"base/mixins/placeholder\",\r\n \"components/mixins/tooltip\",\r\n \"components/mixins/buttons\",\r\n \"components/mixins/burger-icon\",\r\n \"components/mixins/checkbox\",\r\n \"components/mixins/radio\",\r\n \"components/mixins/switch\",\r\n \"components/mixins/ki\",\r\n \"components/mixins/symbol\",\r\n \"components/mixins/menu-horizontal\",\r\n \"components/mixins/menu-vertical\",\r\n \"components/mixins/offcanvas\",\r\n \"components/mixins/spinner\",\r\n \"components/mixins/svg-icon\",\r\n \"components/mixins/navi\",\r\n \"components/mixins/label\",\r\n \"vendors/plugins/mixins/perfect-scrollbar\";\r\n\r\n// Bootstrap mixins\r\n// @import \"../../../tools/node_modules/bootstrap/scss/mixins\";\r\n@import \"../node_modules/bootstrap-scss/mixins\";\r\n\r\n// Global variables\r\n@import \"components/variables.demo\";\r\n@import \"components/variables.bootstrap\";\r\n@import \"components/variables.custom\";\r\n\r\n// 3rd-Party plugins variables\r\n@import \"vendors/plugins/variables\";\r\n\r\n// Theme layout variables\r\n@import \"layout/variables\";\r\n","//\r\n// Get\r\n//\r\n\r\n@function get($map, $keys...) {\r\n @if length($keys) == 1 {\r\n $keys: nth($keys, 1);\r\n }\r\n\r\n @if type-of($map) != 'map' or $map == null {\r\n //@return false;\r\n }\r\n\r\n $warn: \"#{nth($keys, 1)}\";\r\n $length: length($keys);\r\n $get: map-get($map, nth($keys, 1));\r\n\r\n @if $length > 1 {\r\n @for $i from 2 through $length {\r\n @if $get != null and type-of($get) == 'map' {\r\n $warn: $warn + \"->#{nth($keys, $i)}\";\r\n $get: map-get($get, nth($keys, $i));\r\n\r\n @if $get == null {\r\n @return null;\r\n }\r\n }\r\n @else {\r\n @return get-warning($warn, $get, nth($keys, $i));\r\n }\r\n }\r\n }\r\n\r\n @return $get;\r\n}\r\n\r\n@function has($map, $keys...) {\r\n @if length($keys) == 1 {\r\n $keys: nth($keys, 1);\r\n }\r\n\r\n @if type-of($map) != 'map' or $map == null {\r\n //@return false;\r\n }\r\n\r\n $warn: \"#{nth($keys, 1)}\";\r\n $length: length($keys);\r\n $get: map-get($map, nth($keys, 1));\r\n\r\n @if $length > 1 {\r\n @for $i from 2 through $length {\r\n @if $get != null and type-of($get) == 'map' {\r\n $warn: $warn + \"->#{nth($keys, $i)}\";\r\n $get: map-get($get, nth($keys, $i));\r\n\r\n @if $get == null {\r\n @return false;\r\n }\r\n }\r\n @else {\r\n @return false;\r\n }\r\n }\r\n }\r\n\r\n @if $get != null {\r\n @return true;\r\n }\r\n @else {\r\n @return false;\r\n }\r\n}\r\n\r\n@function get-warning($warn, $get, $key) {\r\n @if $get == null {\r\n @warn \"Map has no value for key search `#{$warn}`\";\r\n }\r\n @else if type-of($get) != 'map' {\r\n @warn \"Non-map value found for key search `#{$warn}`, cannot search for key `#{$key}`\";\r\n }\r\n @return null;\r\n}\r\n","//\r\n// Math\r\n//\r\n\r\n@function sqrt($r) {\r\n $x0: 1;\r\n $x1: $x0;\r\n\r\n @for $i from 1 through 10 {\r\n $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);\r\n $x0: $x1;\r\n }\r\n\r\n @return $x1;\r\n}\r\n","//\r\n// valueif\r\n//\r\n\r\n@function valueif($check, $trueValue, $falseValue: null) {\r\n @if $check {\r\n @return $trueValue;\r\n } @else if $falseValue != null {\r\n @return $falseValue;\r\n } @else {\r\n @return null;\r\n }\r\n}\r\n","//\r\n// Bootstrap extended functions\r\n//\r\n\r\n@function theme-inverse-color($key: \"primary\") {\r\n @return get($theme-inverse-colors, $key);\r\n}\r\n\r\n@function theme-outline-inverse-color($key: \"primary\") {\r\n @return get($theme-outline-inverse-colors, $key);\r\n}\r\n\r\n@function theme-hover-color($key: \"primary\") {\r\n @return get($theme-hover-colors, $key);\r\n}\r\n\r\n@function theme-light-color($key: \"primary\") {\r\n @return get($theme-light-colors, $key);\r\n}\r\n\r\n@function theme-shadow-color($key: \"primary\") {\r\n @return get($theme-shadow-colors, $key);\r\n}\r\n","//\r\n// Attr\r\n//\r\n\r\n@mixin attr($attr, $value, $important: '') {\r\n @if $value != null {\r\n #{$attr}: #{$value} #{$important};\r\n }\r\n}\r\n","//\r\n// Browsers\r\n//\r\n\r\n@mixin for-ie11 {\r\n\t// Microsoft IE11\r\n\t@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\r\n\t\t@content;\r\n\t}\r\n}\r\n\r\n@mixin for-edge {\r\n // Microsoft Edge\r\n\t@supports (-ms-ime-align:auto) {\r\n\t\t@content;\r\n\t}\r\n}\r\n","//\r\n// Fixes\r\n//\r\n\r\n\r\n@mixin fix-fixed-position-lags() {\r\n\t// webkit hack for smooth font view on fixed positioned elements\r\n\t-webkit-backface-visibility:hidden;\r\n\tbackface-visibility:hidden;\r\n}\r\n\r\n@mixin fix-animation-lags() {\r\n transform: translateZ(0);\r\n -webkit-transform-style: preserve-3d;\r\n}\r\n","//\r\n// Reset\r\n//\r\n\r\n@mixin button-reset() {\r\n appearance: none;\r\n box-shadow: none;\r\n border-radius: none;\r\n border: none;\r\n cursor: pointer;\r\n background-color: transparent;\r\n outline: none !important;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n@mixin input-reset() {\r\n\tborder: 0;\r\n\tbackground-color: transparent;\r\n\toutline: none !important;\r\n\tbox-shadow: none;\r\n}\r\n","//\r\n// Input placeholder color\r\n//\r\n\r\n@mixin placeholder($color) {\r\n &::-moz-placeholder {\r\n color: $color;\r\n opacity: 1;\r\n }\r\n // See https://github.com/twbs/bootstrap/pull/11526\r\n &:-ms-input-placeholder {\r\n color: $color;\r\n }\r\n // Internet Explorer 10+\r\n &::-webkit-input-placeholder {\r\n color: $color;\r\n }\r\n // Safari and Chrome\r\n}\r\n","//\r\n// Tooltip Mixin\r\n//\r\n\r\n@mixin tooltip-theme($color, $bg-color) {\r\n .tooltip-inner {\r\n color: $color;\r\n background-color: $bg-color;\r\n }\r\n\r\n &.bs-tooltip-top {\r\n .arrow::before {\r\n border-top-color: $bg-color;\r\n }\r\n }\r\n\r\n &.bs-tooltip-right {\r\n .arrow::before {\r\n border-right-color: #{$bg-color}#{'/*rtl:ignore*/'};\r\n }\r\n }\r\n\r\n &.bs-tooltip-bottom {\r\n .arrow::before {\r\n border-bottom-color: $bg-color;\r\n }\r\n }\r\n\r\n &.bs-tooltip-left {\r\n .arrow::before {\r\n border-left-color: $bg-color#{'/*rtl:ignore*/'};\r\n }\r\n }\r\n}\r\n","//\r\n// Custom button variation\r\n//\r\n\r\n\r\n@mixin button-custom-variant(\r\n $background, $border, $color, $icon, $box-shadow,\r\n $hover-background, $hover-border, $hover-color, $hover-icon, $hover-box-shadow,\r\n $active-background, $active-border, $active-color, $active-icon, $active-box-shadow) {\r\n\r\n // Initial state\r\n @if ($color != null) {\r\n color: $color;\r\n }\r\n\r\n @if ($icon != null) {\r\n i {\r\n \t\tcolor: $icon;\r\n \t}\r\n\r\n \t.svg-icon {\r\n \t\t@include svg-icon-color($icon);\r\n \t}\r\n\r\n &.dropdown-toggle:after {\r\n color: $icon;\r\n }\r\n }\r\n\r\n @if ($background != null) {\r\n background-color: $background;\r\n }\r\n\r\n @if ($border != null) {\r\n border-color: $border;\r\n }\r\n\r\n // Hover & focus state\r\n @if ($hover-color != null or $hover-border != null or $hover-icon != null or $hover-background != null) {\r\n &:hover:not(.btn-text):not(:disabled):not(.disabled),\r\n &:focus:not(.btn-text),\r\n &.focus:not(.btn-text) {\r\n @if ($hover-color != null) {\r\n color: $hover-color;\r\n }\r\n\r\n @if ($hover-icon != null) {\r\n i {\r\n \t\tcolor: $hover-color;\r\n \t}\r\n\r\n \t.svg-icon {\r\n \t\t@include svg-icon-color($hover-color);\r\n \t}\r\n\r\n &.dropdown-toggle:after {\r\n color: $hover-color;\r\n }\r\n }\r\n\r\n @if ($hover-background != null) {\r\n background-color: $hover-background;\r\n }\r\n\r\n @if ($hover-border != null) {\r\n border-color: $hover-border;\r\n }\r\n }\r\n }\r\n\r\n // Disabled state\r\n @if ($color != null or $icon != null or $border != null or $background != null) {\r\n // Disabled comes first so active can properly restyle\r\n &.disabled,\r\n &:disabled {\r\n @if ($color != null) {\r\n color: $color;\r\n }\r\n\r\n @if ($icon != null) {\r\n i {\r\n \t\tcolor: $icon;\r\n \t}\r\n\r\n \t.svg-icon {\r\n \t\t@include svg-icon-color($icon);\r\n \t}\r\n\r\n &.dropdown-toggle:after {\r\n color: $icon;\r\n }\r\n }\r\n\r\n @if ($background != null) {\r\n background-color: $background;\r\n }\r\n\r\n @if ($border != null) {\r\n border-color: $border;\r\n }\r\n }\r\n }\r\n\r\n // Active state\r\n @if ($active-color != null or $active-icon != null or $active-border != null or $active-background != null) {\r\n &:not(:disabled):not(.disabled):active:not(.btn-text),\r\n &:not(:disabled):not(.disabled).active,\r\n .show > &.dropdown-toggle,\r\n .show &.btn-dropdown {\r\n @if ($active-color != null) {\r\n color: $active-color;\r\n }\r\n\r\n @if ($active-icon != null) {\r\n i {\r\n \t\tcolor: $active-color;\r\n \t}\r\n\r\n \t.svg-icon {\r\n \t\t@include svg-icon-color($active-color);\r\n \t}\r\n\r\n &.dropdown-toggle:after {\r\n color: $active-color;\r\n }\r\n }\r\n\r\n @if ($active-background != null) {\r\n background-color: $active-background;\r\n }\r\n\r\n @if ($active-border != null) {\r\n border-color: $active-border;\r\n }\r\n\r\n // Focus state\r\n &:focus {\r\n\r\n }\r\n }\r\n }\r\n\r\n // Box shadow\r\n @if ($box-shadow != null) {\r\n box-shadow: $box-shadow;\r\n }\r\n\r\n @if ($hover-box-shadow != null) {\r\n &:hover:not(.btn-text):not(:disabled):not(.disabled),\r\n &:focus:not(.btn-text),\r\n &.focus:not(.btn-text) {\r\n box-shadow: $hover-box-shadow;\r\n }\r\n }\r\n\r\n @if ($active-box-shadow != null) {\r\n &:not(:disabled):not(.disabled):active:not(.btn-text),\r\n &:not(:disabled):not(.disabled).active,\r\n .show > &.dropdown-toggle {\r\n box-shadow: $active-box-shadow;\r\n }\r\n }\r\n}\r\n\r\n\r\n@mixin button-custom-transition($transition) {\r\n // Initial state\r\n transition: $transition;\r\n\r\n i {\r\n transition: $transition;\r\n }\r\n\r\n // Hover & focus state\r\n &:hover:not(.btn-text),\r\n &:focus:not(.btn-text),\r\n &.focus {\r\n transition: $transition;\r\n\r\n i {\r\n transition: $transition;\r\n }\r\n }\r\n\r\n // Disabled state\r\n &.disabled,\r\n &:disabled {\r\n transition: $transition;\r\n\r\n i {\r\n transition: $transition;\r\n }\r\n }\r\n\r\n // Active state\r\n &:not(:disabled):not(.disabled):active:not(.btn-text),\r\n &:not(:disabled):not(.disabled).active,\r\n .show > &.dropdown-toggle {\r\n transition: $transition;\r\n\r\n i {\r\n transition: $transition;\r\n }\r\n }\r\n}\r\n","//\r\n// Burger Icon Mixins\r\n//\r\n\r\n@mixin burger-icon-build($config) {\r\n\t$space: get($config, thickness) + get($config, space);\r\n\r\n\t@include button-reset();\r\n\r\n\tdisplay: inline-block;\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tfont-size: 0;\r\n\ttext-indent: -9999px;\r\n\tappearance: none;\r\n\tbox-shadow: none;\r\n\tborder-radius: none;\r\n\tborder: none;\r\n\tcursor: pointer;\r\n\tbackground-color:none;\r\n\toutline: none !important;\r\n\twidth: get($config, width);\r\n\theight: get($config, height);\r\n\ttransition: get($config, transition);\r\n\r\n\tspan {\r\n\t\tdisplay: block;\r\n \t\tposition: absolute;\r\n\t\t@include border-radius(get($config, radius));\r\n\t\ttransition: get($config, transition);\r\n \t\ttop: (get($config, height) / 2) - (get($config, thickness)) + 1px;\r\n \t\theight: get($config, thickness);\r\n \t\tmin-height: get($config, thickness);\r\n \t\twidth: 100%;\r\n\r\n \t\t&::before,\r\n \t\t&::after {\r\n \t\t\tposition: absolute;\r\n\t\t \tdisplay: block;\r\n\t\t \tleft: 0;\r\n\t\t \twidth: 100%;\r\n\t\t \theight: get($config, thickness);\r\n\t\t \tmin-height: get($config, thickness);\r\n\t\t \tcontent: \"\";\r\n\t\t \ttransition: get($config, transition);\r\n\t\t\t@include border-radius(get($config, radius));\r\n \t\t}\r\n\r\n \t\t&::before {\r\n \t\t\ttop: -($space);\r\n \t\t}\r\n\r\n \t\t&::after {\r\n \t\t\tbottom: -($space);\r\n \t\t}\r\n\t}\r\n\r\n // Left Direction\r\n &-left {\r\n \tspan {\r\n \t\t&:before {\r\n \t\t\ttransition: get($config, transition);\r\n \t\t\tleft: auto;\r\n \t\t\tright: 0px;\r\n \t\t\twidth: 50%;\r\n \t\t}\r\n\r\n \t\t&:after {\r\n \t\t\ttransition: get($config, transition);\r\n \t\t\tleft: auto;\r\n \t\t\tright: 0px;\r\n \t\t\twidth: 75%;\r\n \t\t}\r\n \t}\r\n\r\n \t// Active State\r\n\t &-active {\r\n\t \tspan {\r\n\t \t\t&:before {\r\n\t \t\t\ttransition: get($config, transition);\r\n\t \t\t\tleft: 0px;\r\n\t \t\t\tright: auto;\r\n\t \t\t\twidth: 50%;\r\n\t \t\t}\r\n\r\n\t \t\t&:after {\r\n\t \t\t\ttransition: get($config, transition);\r\n\t \t\t\tleft: 0px;\r\n\t \t\t\tright: auto;\r\n\t \t\t\twidth: 75%;\r\n\t \t\t}\r\n\t \t}\r\n\t }\r\n }\r\n\r\n // Right Direction\r\n &-right {\r\n \tspan {\r\n\t \t&:before {\r\n\t \t\tleft: 0px;\r\n\t \t\tright: auto;\r\n\t \t\twidth: 50%;\r\n\t \t\ttransition: get($config, transition);\r\n\t \t}\r\n\r\n\t \t&:after {\r\n\t \t\tleft: 0px;\r\n\t \t\tright: auto;\r\n\t \t\twidth: 75%;\r\n\t \t\ttransition: get($config, transition);\r\n\t \t}\r\n\t }\r\n\r\n \t// Active State\r\n\t &-active {\r\n\t \tspan {\r\n\t \t\t&:before {\r\n\t \t\t\tleft: auto;\r\n \t\t\t\tright: 0px;\r\n\t \t\t\twidth: 50%;\r\n\t \t\t\ttransition: get($config, transition);\r\n\t \t\t}\r\n\r\n\t \t\t&:after {\r\n\t \t\t\tleft: auto;\r\n \t\t\t\tright: 0px;\r\n\t \t\t\twidth: 75%;\r\n\t \t\t\ttransition: get($config, transition);\r\n\t \t\t}\r\n\t \t}\r\n\t }\r\n }\r\n}\r\n\r\n@mixin burger-icon-theme($default, $hover, $active) {\r\n\tspan {\r\n \t\tbackground-color: $default;\r\n\r\n \t\t&::before,\r\n \t\t&::after {\r\n\t\t \tbackground-color: $default;\r\n \t\t}\r\n\t}\r\n\r\n // Hover State\r\n &:hover {\r\n \tspan {\r\n\t \tbackground-color: $hover;\r\n\r\n\t \t&::before,\r\n\t \t\t&::after {\r\n\t \t\t\tbackground-color: $hover;\r\n\t \t\t}\r\n\t \t}\r\n }\r\n\r\n\t// Active State\r\n &-active {\r\n\t\tspan {\r\n\t \tbackground-color: $active;\r\n\r\n\t \t&::before,\r\n\t \t\t&::after {\r\n\t \t\t\tbackground-color: $active;\r\n\t \t\t}\r\n\t \t}\r\n\t}\r\n}\r\n","//\r\n// Checkbox\r\n//\r\n\r\n\r\n@mixin checkbox-solid-theme($bg-color, $checked-bg-color, $checked-tick-color) {\r\n\t// Default state\r\n > span {\r\n background-color: $bg-color;\r\n border: 1px solid transparent;\r\n }\r\n\r\n\t// Focus state\r\n > input:focus ~ span {\r\n border: 1px solid transparent;\r\n }\r\n\r\n\t// Checked state\r\n > input:checked ~ span {\r\n background-color: $checked-bg-color !important;\r\n\r\n\t\t&:after {\r\n border-color: $checked-tick-color;\r\n }\r\n }\r\n}\r\n\r\n@mixin checkbox-outline-theme($outline-color, $checked-outline-color, $checked-tick-color) {\r\n\t// Default state\r\n\t> span {\r\n\t\tbackground-color: transparent;\r\n border-color: $outline-color;\r\n }\r\n\r\n\t// Focus state\r\n\t> input:focus ~ span {\r\n\t\tbackground-color: transparent;\r\n border-color: $outline-color;\r\n }\r\n\r\n\t// Checked state\r\n > input:checked ~ span {\r\n\t\tbackground-color: transparent;\r\n border-color: $checked-outline-color;\r\n\r\n\t\t&:after {\r\n border-color: $checked-tick-color;\r\n }\r\n }\r\n}\r\n\r\n@mixin checkbox-size($base, $tick) {\r\n\ttop: 1px;\r\n\r\n\t> span {\r\n height: $base;\r\n width: $base;\r\n\r\n\t\t&:after {\r\n width: $tick/2;\r\n height: $tick;\r\n\t\t}\r\n\t}\r\n\r\n\t// Single mode\r\n &.checkbox-single {\r\n width: $base;\r\n height: $base;\r\n\t}\r\n}\r\n","//\r\n// Checkbox\r\n//\r\n\r\n\r\n@mixin radio-solid-theme($bg-color, $checked-bg-color, $checked-tick-color) {\r\n\t// Default state\r\n > span {\r\n background-color: $bg-color;\r\n border: 1px solid transparent;\r\n }\r\n\r\n\t// Focus state\r\n > input:focus ~ span {\r\n border: 1px solid transparent;\r\n }\r\n\r\n\t// Checked state\r\n > input:checked ~ span {\r\n background-color: $checked-bg-color;\r\n\r\n\t\t&:after {\r\n background-color: $checked-tick-color;\r\n border-color: $checked-tick-color;\r\n }\r\n }\r\n}\r\n\r\n@mixin radio-outline-theme($outline-color, $checked-outline-color, $checked-tick-color) {\r\n\t// Default state\r\n\t> span {\r\n\t\tbackground-color: transparent;\r\n border-color: $outline-color;\r\n }\r\n\r\n\t// Focus state\r\n\t> input:focus ~ span {\r\n\t\tbackground-color: transparent;\r\n border-color: $outline-color;\r\n }\r\n\r\n\t// Checked state\r\n > input:checked ~ span {\r\n\t\tbackground-color: transparent;\r\n border-color: $checked-outline-color;\r\n\r\n\t\t&:after {\r\n background-color: $checked-tick-color;\r\n border-color: $checked-tick-color;\r\n }\r\n }\r\n}\r\n\r\n@mixin radio-size($base, $tick) {\r\n\ttop: 1px;\r\n\r\n\t> span {\r\n height: $base;\r\n width: $base;\r\n\r\n\t\t&:after {\r\n width: $tick;\r\n height: $tick;\r\n\t\t}\r\n\t}\r\n\r\n\t// Single mode\r\n &.radio-single {\r\n width: $base;\r\n height: $base;\r\n\t}\r\n}\r\n","//\r\n// Switch\r\n//\r\n\r\n\r\n@mixin switch-size($margin, $width, $height, $line-height, $space, $checked-tick-pos, $icon-font-size) {\r\n input:empty ~ span {\r\n //line-height: $line-height;\r\n margin: $margin;\r\n height: $height;\r\n width: $width + $space;\r\n border-radius: ($height/2);\r\n }\r\n\r\n input:empty ~ span:before,\r\n input:empty ~ span:after {\r\n width: $width;\r\n border-radius: ($height/2);\r\n }\r\n\r\n input:empty ~ span:after {\r\n height: $height - 2 * $space;\r\n width: $height - 2 * $space;\r\n //line-height: $line-height;\r\n top: $space;\r\n bottom: $space;\r\n margin-left: $space;\r\n font-size: $icon-font-size;\r\n text-align: center;\r\n vertical-align: middle;\r\n }\r\n\r\n input:checked ~ span:after {\r\n margin-left: $checked-tick-pos;\r\n }\r\n}\r\n\r\n@mixin switch-default-theme($base, $tick, $checked-base, $checked-tick-bg, $checked-tick-color) {\r\n // Base\r\n input:empty ~ span:before {\r\n background-color: $base;\r\n }\r\n\r\n // Tick\r\n input:empty ~ span:after {\r\n background-color: $tick;\r\n opacity: 0.7;\r\n }\r\n\r\n input:checked {\r\n // Base\r\n ~ span:before {\r\n background-color: $checked-base;\r\n }\r\n\r\n // Tick\r\n ~ span:after {\r\n opacity: 1;\r\n color: $checked-tick-color;\r\n background-color: $checked-tick-bg;\r\n }\r\n }\r\n}\r\n\r\n@mixin switch-outline-theme($outline, $tick-bg, $checked-outline, $checked-tick-bg, $checked-tick-color) {\r\n // Base\r\n input:empty ~ span:before {\r\n border: 2px solid $outline;\r\n background-color: transparent;\r\n }\r\n\r\n // Tick\r\n input:empty ~ span:after {\r\n background-color: $tick-bg;\r\n }\r\n\r\n input:checked {\r\n // Base\r\n ~ span:before {\r\n border: 2px solid $checked-outline;\r\n background-color: transparent;\r\n }\r\n\r\n // Tick\r\n ~ span:after {\r\n color: $checked-tick-color;\r\n background-color: $checked-tick-bg;\r\n }\r\n }\r\n}\r\n","//\r\n// Keenthemes Icons\r\n//\r\n\r\n@mixin ki($icon) {\r\n font-family: Ki;\r\n font-style: normal;\r\n font-weight: normal;\r\n font-variant: normal;\r\n line-height: 1;\r\n text-decoration: inherit;\r\n text-rendering: optimizeLegibility;\r\n text-transform: none;\r\n -moz-osx-font-smoothing: grayscale;\r\n -webkit-font-smoothing: antialiased;\r\n font-smoothing: antialiased;\r\n content: \"#{$icon}\";\r\n}\r\n","//\r\n// Symbol\r\n//\r\n\r\n\r\n@mixin symbol-size($size) {\r\n > img {\r\n width: 100%;\r\n max-width: $size;\r\n height: $size;\r\n }\r\n\r\n .symbol-label {\r\n width: $size;\r\n height: $size;\r\n }\r\n\r\n $badge-size: 12px;\r\n\r\n .symbol-badge {\r\n width: $badge-size;\r\n height: $badge-size;\r\n top: -($badge-size/2);\r\n right: -($badge-size/2);\r\n\r\n &.symbol-badge-bottom {\r\n top: auto;\r\n bottom: -($badge-size/2);\r\n }\r\n }\r\n\r\n &.symbol-circle {\r\n $distance: ($size / 2) * (1.41 - 1) - $badge-size;\r\n\r\n .symbol-badge {\r\n top: $distance;\r\n right: $distance;\r\n\r\n &.symbol-badge-bottom {\r\n top: auto;\r\n bottom: $distance\r\n }\r\n }\r\n }\r\n\r\n &.symbol-fixed {\r\n .symbol-label {\r\n width: $size;\r\n height: $size;\r\n }\r\n\r\n > img {\r\n width: $size;\r\n height: $size;\r\n max-width: auto;\r\n }\r\n }\r\n\r\n // Ratios\r\n &.symbol-2by3 {\r\n .symbol-label {\r\n height: $size;\r\n width: $size * 3/2;\r\n }\r\n\r\n > img {\r\n height: $size;\r\n width: $size * 3/2;\r\n max-width: auto;\r\n }\r\n }\r\n}\r\n","//\r\n// Horizontal Menu\r\n//\r\n\r\n\r\n// Helpers\r\n@mixin menu-hor-item-base($item) {\r\n\t// item\r\n\t@include attr(margin, get($item, self, margin));\r\n\t@include attr(padding, get($item, self, padding));\r\n\r\n\t// link\r\n\t> .menu-link {\r\n\t\ttransition: all 0.3s ease;\r\n\t\tcursor: pointer;\r\n\t\t@include attr(padding, get($item, link, self, padding));\r\n\t\t@include attr(margin, get($item, link, self, margin));\r\n\r\n\t\t&:hover {\r\n\t\t\ttransition: all 0.3s ease;\r\n\t\t}\r\n\r\n\t\t// link icon\r\n\t\t.menu-icon {\r\n\t\t\tfont-size: get($item, link, icon, font-size);\r\n\t\t\twidth: get($item, link, icon, width);\r\n\t\t\tpadding: get($item, link, icon, padding);\r\n\t\t\tline-height: 0;\r\n\r\n\t\t\t// duo-tone svg icon\r\n\t\t\t&.svg-icon {\r\n\t\t\t\t@include attr(height, get($item, link, icon, svg-width));\r\n\t\t\t\t@include attr(width, get($item, link, icon, svg-width));\r\n\t\t\t\tmargin-left: -2px;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// link bullet\r\n\t\t.menu-bullet {\r\n\t\t\twidth: get($item, link, bullet, self, width);\r\n\r\n\t\t\t@if has($item, link, bullet, padding) {\r\n\t\t\t\tpadding: get($item, link, bullet, padding);\r\n\t\t\t}\r\n\r\n\t\t\t> span {\r\n\t\t\t\tvertical-align: middle;\r\n\t\t\t\tdisplay: inline-block;\r\n\t\t\t}\r\n\r\n\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t> span {\r\n\t\t\t\t\twidth: get($item, link, bullet, dot, size);\r\n\t\t\t\t\theight: get($item, link, bullet, dot, size);\r\n\t\t\t\t\tborder-radius: 100%;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t&.menu-bullet-line {\r\n\t\t\t\t> span {\r\n\t\t\t\t\twidth: get($item, link, bullet, line, width);\r\n\t\t\t\t\theight: get($item, link, bullet, line, height);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// link text\r\n\t\t.menu-text {\r\n\t\t\tfont-weight: get($item, link, text, font-weight);\r\n\t\t\tfont-size: get($item, link, text, font-size);\r\n\t\t\ttext-transform: get($item, link, text, font-transform);\r\n\r\n\t\t\t@if has($item, link, text, padding) {\r\n\t\t\t\tpadding: get($item, link, text, padding);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// link label\r\n\t\t.menu-label {\r\n\t\t\tpadding: get($item, link, label, padding);\r\n\t\t\tjustify-content: get($item, link, label, align);\r\n\t\t}\r\n\r\n\t\t// link arrow icon\r\n\t\t.menu-arrow {\r\n\t\t\tfont-size: get($item, link, arrow, font-size);\r\n\t\t\twidth: get($item, link, arrow, width);\r\n\t\t\tjustify-content: flex-end;\r\n\r\n\t\t\t@if has($item, link, arrow, padding) {\r\n\t\t\t\tpadding: get($item, link, arrow, padding);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t.menu-arrow {\r\n\t\t\t&:before {\r\n\t\t\t\t@include ki(get($ki-types, 'arrowNext'));\r\n\r\n\t\t\t\t[direction=\"rtl\"] & {\r\n\t\t\t\t\tcontent: get($ki-types, 'arrowBack') !important;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// link border radius\r\n\t\t@include border-radius(get($item, link, self, border-radius));\r\n\r\n\t\t// menu root level \"here\" arrow\r\n\t\t.menu-item-here {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin menu-hor-item-theme($item) {\r\n\t// link\r\n\t> .menu-link {\r\n\t\tbackground-color: get($item, link, self, bg-color, default);\r\n\r\n\t\t// link icon\r\n\t\t.menu-icon {\r\n\t\t\tcolor: get($item, link, icon, font-color, default);\r\n\r\n\t\t\t// Due-tone icon\r\n\t\t\t&.svg-icon {\r\n\t\t\t\t@include svg-icon-color(get($item, link, icon, font-color, default));\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// link bullet\r\n\t\t.menu-bullet {\r\n\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t> span {\r\n\t\t\t\t\tbackground-color: get($item, link, bullet, dot, bg-color, default);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t&.menu-bullet-line {\r\n\t\t\t\t> span {\r\n\t\t\t\t\tbackground-color: get($item, link, bullet, line, bg-color, default);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// link text\r\n\t\t.menu-text {\r\n\t\t\tcolor: get($item, link, text, font-color, default);\r\n\r\n\t\t\t@if has($item, link, text, font-weight) {\r\n\t\t\t\tfont-weight: get($item, link, text, font-weight);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// link arrow icon\r\n\t\t.menu-arrow {\r\n\t\t\tcolor: get($item, link, arrow, font-color, default);\r\n\t\t}\r\n\t}\r\n\r\n\t// active state\r\n\t&.menu-item-active {\r\n\t\t> .menu-link {\r\n\t\t\t// link bg color\r\n\t\t\tbackground-color: get($item, link, self, bg-color, active);\r\n\r\n\t\t\t// link icon\r\n\t\t\t.menu-icon {\r\n\t\t\t\tcolor: get($item, link, icon, font-color, active);\r\n\r\n\t\t\t\t// Due-tone icon\r\n\t\t\t\t&.svg-icon {\r\n\t\t\t\t\t@include svg-icon-color(get($item, link, icon, font-color, active));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// link bullet\r\n\t\t\t.menu-bullet {\r\n\t\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\tbackground-color: get($item, link, bullet, dot, bg-color, active);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-bullet-line {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\tbackground-color: get($item, link, bullet, line, bg-color, active);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t.menu-text {\r\n\t\t\t\tcolor: get($item, link, text, font-color, active);\r\n\t\t\t}\r\n\r\n\t\t\t// link arrow icon\r\n\t\t\t> .menu-arrow {\r\n\t\t\t\tcolor: get($item, link, arrow, font-color, active);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// here state\r\n\t&.menu-item-here {\r\n\t\t> .menu-link {\r\n\t\t\t// link bg color\r\n\t\t\tbackground-color: get($item, link, self, bg-color, here);\r\n\r\n\t\t\t// link icon\r\n\t\t\t.menu-icon {\r\n\t\t\t\tcolor: get($item, link, icon, font-color, here);\r\n\r\n\t\t\t\t// Due-tone icon\r\n\t\t\t\t&.svg-icon {\r\n\t\t\t\t\t@include svg-icon-color(get($item, link, icon, font-color, here));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// link bullet\r\n\t\t\t.menu-bullet {\r\n\t\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\tbackground-color: get($item, link, bullet, dot, bg-color, here);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-bullet-line {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\tbackground-color: get($item, link, bullet, line, bg-color, here);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t.menu-text {\r\n\t\t\t\tcolor: get($item, link, text, font-color, here);\r\n\t\t\t}\r\n\r\n\t\t\t// link arrow icon\r\n\t\t\t> .menu-arrow {\r\n\t\t\t\tcolor: get($item, link, arrow, font-color, here);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// hover state\r\n\t&:hover:not(.menu-item-here):not(.menu-item-active),\r\n\t&.menu-item-hover:not(.menu-item-here):not(.menu-item-active) {\r\n\t\t> .menu-link {\r\n\t\t\t// link bg color\r\n\t\t\tbackground-color: get($item, link, self, bg-color, hover);\r\n\r\n\t\t\t// link icon\r\n\t\t\t.menu-icon {\r\n\t\t\t\tcolor: get($item, link, icon, font-color, hover);\r\n\r\n\t\t\t\t// Due-tone icon\r\n\t\t\t\t&.svg-icon {\r\n\t\t\t\t\t@include svg-icon-color(get($item, link, icon, font-color, hover));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// link bullet\r\n\t\t\t.menu-bullet {\r\n\t\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\tbackground-color: get($item, link, bullet, dot, bg-color, hover);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-bullet-line {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\tbackground-color: get($item, link, bullet, line, bg-color, hover);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// link text\r\n\t\t\t.menu-text {\r\n\t\t\t\tcolor: get($item, link, text, font-color, hover);\r\n\t\t\t}\r\n\r\n\t\t\t// link arrow icon\r\n\t\t\t> .menu-arrow {\r\n\t\t\t\tcolor: get($item, link, arrow, font-color, hover);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin menu-hor-item-heading-base($item) {\r\n\t// heading\r\n\tpadding: get($item, self, padding);\r\n\r\n\t// text\r\n\t> .menu-text {\r\n\t\tfont-weight: get($item, caption, text, font-weight);\r\n\t\tfont-size: get($item, caption, text, font-size);\r\n\t\ttext-transform: get($item, caption, text, font-transform);\r\n\t}\r\n\r\n\t// icon\r\n\t> .menu-icon {\r\n\t\tfont-size: get($item, caption, icon, font-size);\r\n\t\tflex: 0 0 get($item, caption, icon, width);\r\n\t\tjustify-content: get($item, caption, icon, align);\r\n\t\tpadding: get($item, caption, icon, padding);\r\n\t}\r\n\r\n\t// label\r\n\t.menu-label {\r\n\t\tpadding: get($item, caption, label, padding);\r\n\t\ttext-align: get($item, caption, label, align);\r\n\t}\r\n}\r\n\r\n@mixin menu-hor-item-heading-theme($item) {\r\n\t// text\r\n\t> .menu-text {\r\n\t\tcolor: get($item, caption, text, font-color);\r\n\t}\r\n\r\n\t// icon\r\n\t> .menu-icon {\r\n\t\tcolor: get($item, caption, icon, font-color);\r\n\t}\r\n}\r\n\r\n@mixin menu-hor-submenu-width($config) {\r\n\t@include media-breakpoint-between(lg, xl) {\r\n\t\t.#{get($config, base, class)} {\r\n\t\t\t.menu-nav {\r\n\t\t\t\t// menu root item\r\n\t\t\t\t> .menu-item {\r\n\t\t\t\t\t// general submenu\r\n\t\t\t\t\t.menu-submenu {\r\n\t\t\t\t\t\t&.menu-submenu-full,\r\n\t\t\t\t\t\t&.menu-submenu-fixed,\r\n\t\t\t\t\t\t&.menu-submenu-auto,\r\n\t\t\t\t\t\t&.menu-submenu-auto.menu-submenu-mimimal-desktop-wide,\r\n\t\t\t\t\t\t&.menu-submenu-fixed-xl,\r\n\t\t\t\t\t\t&.menu-submenu-fixed-xxl {\r\n\t\t\t\t\t\t\tmargin: 0 auto;\r\n\t\t\t\t\t\t\twidth: auto;\r\n\t\t\t\t\t\t\tleft: 20px;\r\n\t\t\t\t\t\t\tright: 20px;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// Responsive container widths\r\n\t@each $breakpoint, $width in $grid-breakpoints {\r\n\t @media (min-width: $width) {\r\n\t \t.#{get($config, base, class)} {\r\n\t\t\t\t.menu-nav {\r\n\t\t\t\t\t// menu root item\r\n\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t// general submenu\r\n\t\t\t\t\t\t.menu-submenu.menu-submenu-fixed-#{$breakpoint} {\r\n\t\t\t\t\t width: $width - 60px;\r\n\t\t\t\t\t }\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t }\r\n\t}\r\n}\r\n\r\n@mixin menu-hor-base($config) {\r\n\t.#{get($config, base, class)} {\r\n\t\tdisplay: flex;\r\n\t\talign-items: stretch;\r\n\t\theight: 100%;\r\n\t margin: get($config, build, layout, self, margin);\r\n\r\n \t// general menu\r\n\t\t.menu-nav {\r\n\t\t\tlist-style: none;\r\n\t\t\tmargin: 0;\r\n\t\t\tpadding: 0;\r\n\t\t\tdisplay: flex;\r\n\t\t\talign-items: stretch;\r\n\r\n\t\t\t// menu root item\r\n\t\t\t> .menu-item {\r\n\t\t\t\t// general link\r\n\t\t\t\t.menu-link {\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\ttext-decoration: none;\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\tvertical-align: middle;\r\n\t\t\t\t\talign-items: stretch;\r\n\t\t\t\t\toutline: none !important;\r\n\t\t\t\t\ttext-decoration: none;\r\n\t\t\t\t\tcursor: pointer;\r\n\r\n\t\t\t\t\t.menu-text {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\tflex-grow: 1;\r\n\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t.menu-label {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\tline-height: 0;\r\n\t\t\t\t\t\twhite-space: nowrap;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// link icon\r\n\t\t\t\t\t.menu-icon {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// sub menu link arrow icon\r\n\t\t\t\t\t.menu-arrow {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t&:hover,\r\n\t\t\t\t\t&:active,\r\n\t\t\t\t\t&:focus {\r\n\t\t\t\t\t\ttext-decoration: none;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// primary link\r\n\t\t\t\t> .menu-link {\r\n\t\t\t\t\t> .menu-text {\r\n\t\t\t\t\t\twidth: auto;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// icon only menu item\r\n\t\t\t\t&.menu-item-icon {\r\n\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\tjustify-content: center;\r\n\r\n\t\t\t\t\t\t> .menu-icon {\r\n\t\t\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// general submenu\r\n\t\t\t\t.menu-submenu {\r\n\t\t\t\t\tdisplay: none;\r\n\t\t\t\t\tz-index: get($config, build, layout, item, submenu, self, zindex);\r\n\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\ttop: 100%;\r\n\r\n\t\t\t\t\t@include fix-animation-lags();\r\n\t\t\t\t\t@include border-radius(get($config, build, layout, item, submenu, self, border-radius));\r\n\t\t\t\t\t@include attr(margin, get($config, build, layout, item, submenu, self, margin));\r\n\t\t\t\t\t@include attr(padding, get($config, build, layout, item, submenu, self, padding, classic));\r\n\r\n\t\t\t\t\t.menu-scroll {\r\n\t\t\t\t\t\tposition: relative;\r\n\t\t\t\t\t\toverflow: hidden;\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\tflex-direction: column;\r\n\t\t\t\t\t\tflex-grow: 1;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\tlist-style: none !important;\r\n\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// classic submenu\r\n\t\t\t\t\t& {\r\n\t\t\t\t\t\twidth: get($config, build, layout, item, submenu, self, width, classic);\r\n\t\t\t\t\t\tmargin: 0 auto;\r\n\t\t\t\t\t\tleft: auto;\r\n\t\t \t\t\tright: auto;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// full width\r\n\t\t\t\t\t&.menu-submenu-full {\r\n\t\t\t\t\t\tmargin: 0 auto;\r\n\t\t\t\t\t\twidth: auto;\r\n\t\t\t\t\t\tleft: get($config, build, layout, item, submenu, self, width, full, offset);\r\n\t\t\t\t\t\tright: get($config, build, layout, item, submenu, self, width, full, offset);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// fixed width options\r\n\t\t\t\t\t&.menu-submenu-fixed {\r\n\t\t\t\t\t\tleft: auto;\r\n\t\t\t\t\t\tright: auto;\r\n\t\t\t\t\t\twidth: auto;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// alignment right\r\n\t\t\t\t\t&.menu-submenu-right {\r\n\t\t\t\t\t\tright: 0;\r\n\t\t\t\t\t\tleft: auto;\r\n\r\n\t\t\t\t\t\t&.menu-submenu-pull {\r\n\t\t\t\t\t\t\tmargin-right: -40px;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// alignment left\r\n\t\t\t\t\t&.menu-submenu-left {\r\n\t\t\t\t\t\tright: auto;\r\n\t\t\t\t\t\tleft: 0;\r\n\r\n\t\t\t\t\t\t&.menu-submenu-pull {\r\n\t\t\t\t\t\t\tmargin-left: -40px;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// alignment center\r\n\t\t\t\t\t&.menu-submenu-center {\r\n\t\t\t\t\t\tmargin: 0 auto;\r\n\t\t\t\t\t\tleft: 0;\r\n\t\t \t\t\tright: 0;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// sub menu dropdown\r\n\t\t\t\t\t> .menu-subnav {\r\n\t\t\t\t\t\t> .menu-item.menu-item-submenu {\r\n\t\t\t\t\t\t\tposition: relative;\r\n\t\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\t\tmargin: 0;\r\n\r\n\t\t\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\t\t\ttop:0;\r\n\t\t\t\t\t\t\t\tdisplay: none;\r\n\t\t\t\t\t\t\t\tmargin-top: 0;\r\n\r\n\t\t\t\t\t\t\t\t&.menu-submenu-left {\r\n\t\t\t\t\t\t\t\t\tright: 100%;\r\n\t\t\t\t\t\t\t\t\tleft: auto;\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t&.menu-submenu-right {\r\n\t\t\t\t\t\t\t\t\tleft: 100%;\r\n\t\t\t\t\t\t\t\t\tright: auto;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t// Dropup Submenu\r\n\t\t\t\t\t\t\t&.menu-item-dropup {\r\n\t\t\t\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\t\t\t\ttop: auto;\r\n\t\t\t\t\t\t\t\t\tbottom: 0;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// mega menu content\r\n\t\t\t\t\t.menu-content {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\tlist-style: none;\r\n\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\tmargin: 0;\r\n\r\n\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\tflex-direction: column;\r\n\t\t\t\t\t \tflex-grow: 1;\r\n\r\n\t\t\t\t\t \t&:last-child {\r\n\t\t\t\t\t \t\tborder-right: 0;\r\n\t\t\t\t\t \t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// mega heading\r\n\t\t\t\t\t.menu-heading {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\t\ttext-decoration: none;\r\n\t\t\t\t\t\tposition: relative;\r\n\r\n\t\t\t\t\t\t.menu-text {\r\n\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\tflex-grow: 1\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t.menu-label {\r\n\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\twhite-space: nowrap;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t// link icon\r\n\t\t\t\t\t\t.menu-icon {\r\n\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\tfont-size: 18px;\r\n\t\t\t\t\t\t\tpadding: 0 10px 0 0;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t// sub menu link arrow icon\r\n\t\t\t\t\t\t.menu-arrow {\r\n\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\tpadding: 0 0 0 10px;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.menu-inner,\r\n\t\t\t\t.menu-subnav {\r\n\t\t\t\t\tlist-style: none;\r\n\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\tpadding: 0;\r\n\r\n\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\tflex-grow: 1;\r\n\t\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\t\tpadding: 10px 20px;\r\n\r\n\t\t\t\t\t\t.menu-link {\r\n\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\tflex-grow: 1;\r\n\t\t\t\t\t\t\ttext-decoration: none;\r\n\t\t\t\t\t\t\tposition: relative;\r\n\r\n\t\t\t\t\t\t\t&:hover,\r\n\t\t\t\t\t\t\t&:active,\r\n\t\t\t\t\t\t\t&:focus {\r\n\t\t\t\t\t\t\t\toutline: none;\r\n\t\t\t\t\t\t\t\ttext-decoration: none;\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t.menu-text {\r\n\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\t\tfont-weight: get($config, build, layout, item, submenu, item, link, text, font-weight);\r\n\t\t\t\t\t\t\t\tcolor: get($config, build, layout, item, submenu, item, link, text, font-color, default);\r\n\t\t\t\t\t\t\t\tfont-size: get($config, build, layout, item, submenu, item, link, text, font-size);\r\n\t\t\t\t\t\t\t\ttext-transform: get($config, build, layout, item, submenu, item, link, text, font-transform);\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t.menu-label {\r\n\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\t\twhite-space: nowrap;\r\n\t\t\t\t\t\t\t\tpadding: get($config, build, layout, item, submenu, item, link, label, padding);\r\n\t\t\t\t\t\t\t\ttext-align: get($config, build, layout, item, submenu, item, link, label, align);\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t// link icon\r\n\t\t\t\t\t\t\t.menu-icon {\r\n\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\t\tflex: 0 0 get($config, build, layout, item, submenu, item, link, icon, width);\r\n\t\t\t\t\t\t\t\tpadding: get($config, build, layout, item, submenu, item, link, icon, padding);\r\n\t\t\t\t\t\t\t\tcolor: get($config, build, layout, item, submenu, item, link, icon, font-color, default);\r\n\t\t\t\t\t\t\t\tfont-size: get($config, build, layout, item, submenu, item, link, icon, font-size);\r\n\t\t\t\t\t\t\t\ttext-align: get($config, build, layout, item, submenu, item, link, icon, align);\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t// menu item link's icon part\r\n\t\t\t\t\t\t\t.menu-bullet {\r\n\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\t\tline-height: 0;\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t// sub menu link arrow icon\r\n\t\t\t\t\t\t\t.menu-arrow {\r\n\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\t\tpadding: get($config, build, layout, item, submenu, item, link, arrow, padding);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.menu-inner {\r\n\t\t\t\t\tpadding: 0;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// sub dropdown menu space\r\n\t\t\t\t@if has($config, build, layout, item, submenu, self, space) {\r\n\t\t\t\t\t.menu-submenu {\r\n\t\t\t\t\t\t.menu-submenu {\r\n\t\t\t\t\t\t\tmargin-left: get($config, build, layout, item, submenu, self, space);\r\n\r\n\t\t\t\t\t\t\t&.menu-submenu-left {\r\n\t\t\t\t\t\t\t\tmargin-right: get($config, build, layout, item, submenu, self, space);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// tabs integration\r\n\t\t\t\t&.menu-item-submenu.menu-item-tabs > .menu-submenu > .menu-subnav > .menu-item.menu-item-submenu {\r\n\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\ttop:100%;\r\n\r\n\t\t\t\t\t\t&.menu-submenu-left {\r\n\t\t\t\t\t\t\tright: 100%;\r\n\t\t\t\t\t\t\tleft: 0;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t&.menu-submenu-right {\r\n\t\t\t\t\t\t\tleft: 100%;\r\n\t\t\t\t\t\t\tright: 0;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// Root Menu\r\n\t\t.menu-nav {\r\n\t\t\t> .menu-item {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\talign-items: center;\r\n\t\t\t\tpadding: get($config, build, layout, item, self, padding);\r\n\r\n\t\t\t\t// Root Menu arrow\r\n\t\t\t\t> .menu-link {\r\n\t\t\t\t\t> .menu-arrow {\r\n\t\t\t\t\t\tdisplay: none;\r\n\r\n\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\tcontent: \"#{get($ki-types, arrowDown)}\" !important;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// used for classic submenus\r\n\t\t\t\t&.menu-item-rel {\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t@include menu-hor-item-base( get($config, build, layout, item) );\r\n\r\n\t\t\t\t// submenu\r\n\t\t\t\t.menu-submenu {\r\n\t\t\t\t\tpadding: get($config, build, layout, item, submenu, self, padding, megamenu);\r\n\t\t\t\t\t@include border-radius(get($config, build, layout, item, submenu, self, border-radius));\r\n\r\n\t\t\t\t\t> .menu-subnav {\r\n\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t@include menu-hor-item-base(get($config, build, layout, item, submenu, item));\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t// mega submenu\r\n\t\t\t\t\t\t.menu-content {\r\n\t\t\t\t\t\t\talign-items: stretch;\r\n\t\t\t\t\t\t\t// separator\r\n\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\tflex-grow: 1;\r\n\t\t\t\t\t\t\t\tflex-basis: 0;\r\n\r\n\t\t\t\t\t\t\t\t&:last-child {\r\n\t\t\t\t\t\t\t\t\tborder-right:0 !important;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t// heading\r\n\t\t\t\t\t\t\t.menu-heading {\r\n\t\t\t\t\t\t\t\t@include menu-hor-item-heading-base(get($config, build, layout, item, submenu, item, column, heading));\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t// mega menu\r\n\t\t\t\t\t\t\t.menu-inner {\r\n\t\t\t\t\t\t\t\tpadding: get($config, build, layout, item, submenu, item, column, self, padding);\r\n\r\n\t\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\t\t@include menu-hor-item-base(get($config, build, layout, item, submenu, item));\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t&.menu-submenu-classic {\r\n\t\t\t\t\t\tpadding: get($config, build, layout, item, submenu, self, padding, classic);\r\n\t\t\t\t\t\t> .menu-subnav {\r\n\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// inline submenu\r\n\t\t\t\t\t&.menu-submenu-inline {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\tflex: 0 0 auto;\r\n\r\n\t\t\t\t\t\t> .menu-subnav {\r\n\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\tpadding: 5px 0;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// general submenu hover effect\r\n\t\t\t.menu-item {\r\n\t\t\t\t// menu resize item\r\n\t\t\t\t&.menu-item-resize {\r\n\t\t\t\t\tdisplay: none;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// menu item hover\r\n\t\t\t\t&.menu-item-active-tab,\r\n\t\t\t\t&.menu-item-hover {\r\n\t\t\t\t\t.menu-submenu {\r\n\t\t\t\t\t\tdisplay: block;\r\n\t\t\t\t\t\tanimation: #{get($config, base, class)}-submenu-fade-in .3s ease 1, #{get($config, base, class)}-submenu-move-down .3s ease-out 1;\r\n\r\n\t\t\t\t\t\t// ie8-11 versions hack\r\n \t@include for-ie11 {\r\n \tanimation: none;\r\n \t}\r\n\r\n\t\t\t\t\t\t> .menu-subnav > .menu-item.menu-item-hover {\r\n\t\t\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\t\t\tdisplay: block;\r\n\t\t\t\t\t\t\t\tanimation: #{get($config, base, class)}-submenu-fade-in .3s ease 1, #{get($config, base, class)}-submenu-move-up .3s ease-out 1;\r\n\r\n\t\t\t\t\t\t\t\t// ie8-11 versions hack\r\n \t\t\t@include for-ie11 {\r\n \t\t\tanimation: none;\r\n \t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// Root Menu arrow display\r\n\t\t&.#{get($config, base, class)}-root-arrow {\r\n\t\t\t.menu-nav {\r\n\t\t\t\t> .menu-item {\r\n\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\t> .menu-arrow {\r\n\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin menu-hor-theme($base-class, $config) {\r\n\t.#{$base-class} {\r\n\t\t// root level items\r\n\t\t@if has($config, item, link) {\r\n\t\t\t.menu-nav {\r\n\t\t\t\t> .menu-item {\r\n\t\t\t\t\t@if get($config, item, self) {\r\n\t\t\t\t\t\t&.menu-item-hover,\r\n\t\t\t\t\t\t&:hover {\r\n\t\t\t\t\t\t\tbackground-color: get($config, item, self, bg-color, hover);\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t&.menu-item-here {\r\n\t\t\t\t\t\t\tbackground-color: get($config, item, self, bg-color, here);\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t&.menu-item-open,\r\n\t\t\t\t\t\t&.menu-item-active {\r\n\t\t\t\t\t\t\tbackground-color: get($config, item, self, bg-color, active);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t@include menu-hor-item-theme(get($config, item));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// submenu level items\r\n\t\t.menu-nav {\r\n\t\t\t> .menu-item {\r\n\t\t\t\t// classic submenu\r\n\t\t\t\t.menu-submenu {\r\n\t\t\t\t\tbackground-color: get($config, item, submenu, self, bg-color);\r\n\t\t\t\t\tbox-shadow: get($config, item, submenu, self, box-shadow);\r\n\r\n\t\t\t\t\t> .menu-subnav {\r\n\t\t\t\t\t\t// submenu item\r\n\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t@include menu-hor-item-theme(get($config, item, submenu, item));\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t// mega submenu\r\n\t\t\t\t\t\t.menu-content {\r\n\t\t\t\t\t\t\t// separator\r\n\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\tborder-right: get($config, item, submenu, item, column, separator, border);\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t// heading\r\n\t\t\t\t\t\t\t.menu-heading {\r\n\t\t\t\t\t\t\t\t@include menu-hor-item-heading-theme(get($config, item, submenu, item, column, heading));\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t// mega menu\r\n\t\t\t\t\t\t\t.menu-inner {\r\n\t\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\t\t@include menu-hor-item-theme(get($config, item, submenu, item));\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Build Theme\r\n@mixin menu-hor-build-theme($config, $theme) {\r\n\t$theme-config: ();\r\n\r\n\t@if ($theme == default) {\r\n\t\t$theme-config: get($config, build, theme);\r\n\t} @else {\r\n\t\t$theme-config: get($config, build, themes, $theme);\r\n\t}\r\n\r\n\t// Base vertical menu\r\n\t@if (get($config, base, mode) == general) {\r\n\r\n\t\t@include menu-hor-theme(get($config, base, class), $theme-config);\r\n\r\n\t} @else if (get($config, base, mode) == desktop) {\r\n\t\t// Desktop Mode\r\n\t\t@include media-breakpoint-up(lg) {\r\n\t\t\t@include menu-hor-theme(get($config, base, class), $theme-config);\r\n\t\t}\r\n\r\n\t} @else if (get($config, base, mode) == tablet-and-mobile) {\r\n\t\t// Tablet & Mobile Modes\r\n\t\t@include media-breakpoint-down(md) {\r\n\t\t\t@include menu-hor-theme(get($config, base, class), $theme-config);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Build Layout\r\n@mixin menu-hor-build-layout($config) {\r\n\t// Base vertical menu\r\n\t@if (get($config, base, mode) == general) {\r\n\r\n\t\t@include menu-hor-base($config);\r\n\r\n\t} @else if (get($config, base, mode) == desktop) {\r\n\r\n\t\t// Desktop Mode\r\n\t\t@include media-breakpoint-up(lg) {\r\n\t\t\t@include menu-hor-base($config);\r\n\t\t}\r\n\r\n\t\t@include menu-hor-submenu-width($config);\r\n\r\n\t} @else if (get($config, base, mode) == tablet-and-mobile) {\r\n\t\t// Tablet & Mobile Modes\r\n\t\t@include media-breakpoint-down(md) {\r\n\t\t\t@include menu-hor-base($config);\r\n\t\t}\r\n\t}\r\n\r\n\t// Horizontal Menu Hoverable Submenu Animations\r\n\t@keyframes #{get($config, base, class)}-submenu-fade-out {\r\n\t from { opacity: 1; }\r\n\t to { opacity: 0; }\r\n\t}\r\n\r\n\t@keyframes #{get($config, base, class)}-submenu-fade-in {\r\n\t from { opacity: 0; }\r\n\t to { opacity: 1; }\r\n\t}\r\n\r\n\t@keyframes #{get($config, base, class)}-submenu-move-up {\r\n\t from { margin-top: get($config, build, layout, item, submenu, self, animation, offset); }\r\n\t to { margin-top: 0; }\r\n\t}\r\n\r\n\t@keyframes #{get($config, base, class)}-submenu-move-down {\r\n\t from { margin-top: -(get($config, build, layout, item, submenu, self, animation, offset)); }\r\n\t to { margin-top: 0; }\r\n\t}\r\n}\r\n","//\r\n// Vertical Menu Generator Helpers\r\n//\r\n\r\n\r\n\r\n// Item\r\n@mixin menu-ver-item-base($item) {\r\n\t// item\r\n\t@include attr(margin, get($item, self, margin));\r\n\t@include attr(padding, get($item, self, padding));\r\n\r\n\t// item link and heading\r\n\t> .menu-heading,\r\n\t> .menu-link {\r\n\t\tcursor: pointer;\r\n\t\t@include border-radius(get($item, link, self, border-radius));\r\n\t\t// link height\r\n\t\tmin-height: get($item, link, self, height);\r\n\r\n\t\t// link margin\r\n\t\t@include attr(margin, get($item, link, self, margin));\r\n\r\n\t\t// menu item link's text part\r\n\t\t.menu-text {\r\n\t\t\tfont-weight: get($item, link, text, font-weight);\r\n\t\t\tfont-size: get($item, link, text, font-size);\r\n\t\t\ttext-transform: get($item, link, text, font-transform);\r\n\t\t}\r\n\r\n\t\t// menu item link's icon\r\n\t\t.menu-icon {\r\n\t\t\ttext-align: get($item, link, icon, align);\r\n\t\t\tflex: 0 0 get($item, link, icon, width);\r\n\t\t\tfont-size: get($item, link, icon, font-size);\r\n\r\n\t\t\t// duo-tone svg icon\r\n\t\t\tsvg {\r\n\t\t\t\t@include attr(height, get($item, link, icon, svg-width));\r\n\t\t\t\t@include attr(width, get($item, link, icon, svg-width));\r\n\t\t\t\tmargin-left: -2px;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// menu item link's bullet\r\n\t\t.menu-bullet {\r\n\t\t\tvertical-align: middle;\r\n\t\t\ttext-align: left;\r\n\t\t\tflex: 0 0 get($item, link, bullet, self, width);\r\n\r\n\t\t\t> span {\r\n\t\t\t\tvertical-align: middle;\r\n\t\t\t\tdisplay: inline-block;\r\n\t\t\t}\r\n\r\n\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t> span {\r\n\t\t\t\t\twidth: get($item, link, bullet, dot, size);\r\n\t\t\t\t\theight: get($item, link, bullet, dot, size);\r\n\t\t\t\t\tborder-radius: 100%;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t&.menu-bullet-line {\r\n\t\t\t\t> span {\r\n\t\t\t\t\twidth: get($item, link, bullet, line, width);\r\n\t\t\t\t\theight: get($item, link, bullet, line, height);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// menu item link's icon part\r\n\t\t.menu-label {\r\n\t\t\tpadding: get($item, link, label, padding);\r\n\t\t\ttext-align: get($item, link, label, align);\r\n\t\t}\r\n\r\n\t\t// menu item link's arrow part\r\n\t\t.menu-arrow {\r\n\t\t\ttext-align: get($item, link, arrow, align);\r\n\t\t\tflex: 0 0 get($item, link, arrow, width);\r\n\t\t\tfont-size: get($item, link, arrow, font-size);\r\n\r\n\t\t\t&:before {\r\n\t\t\t\ttransition: get($item, link, arrow, transition);\r\n\t\t\t\t@include ki(get($ki-types, arrowNext));\r\n\r\n\t\t\t\t[direction=\"rtl\"] & {\r\n\t\t\t\t\tcontent: \"#{get($ki-types, arrowBack)}\" !important;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// menu root level \"here\" arrow\r\n\t\t.menu-item-here {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n\r\n\t// item link open state\r\n\t&.menu-item-open {\r\n\t\t> .menu-heading,\r\n\t\t> .menu-link {\r\n\t\t\t// menu item link's arrow part\r\n\t\t\t.menu-arrow {\r\n\t\t\t\t&:before {\r\n\t\t\t\t\ttransition: get($item, link, arrow, transition);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin menu-ver-item-theme($item) {\r\n\t// item\r\n\t@include attr(background-color, get($item, self, bg-color, default));\r\n\r\n\t// item link and heading\r\n\t> .menu-heading,\r\n\t> .menu-link {\r\n\t\t// menu item link's text part\r\n\t\t.menu-text {\r\n\t\t\t@include attr(color, get($item, link, text, font-color, default));\r\n\t\t\t@if has($item, link, text, font-weight) {\r\n\t\t\t\tfont-weight: get($item, link, text, font-weight);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// menu item link's icon\r\n\t\t.menu-icon {\r\n\t\t\t@include attr(color, get($item, link, icon, font-color, default));\r\n\r\n\t\t\t// Due-tone icon\r\n\t\t\t&.svg-icon {\r\n\t\t\t\t@include svg-icon-color(get($item, link, icon, font-color, default));\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// menu item link's bullet\r\n\t\t.menu-bullet {\r\n\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t> span {\r\n\t\t\t\t\t@include attr(background-color, get($item, link, bullet, dot, bg-color, default));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t&.menu-bullet-line {\r\n\t\t\t\t> span {\r\n\t\t\t\t\t@include attr(background-color, get($item, link, bullet, line, bg-color, default));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// menu item link's arrow part\r\n\t\t.menu-arrow {\r\n\t\t\t@include attr(color, get($item, link, arrow, font-color, default));\r\n\t\t}\r\n\t}\r\n\r\n\t// item link open state\r\n\t&.menu-item-open {\r\n\t\ttransition: background-color 0.3s;\r\n\t\t@include attr(background-color, get($item, self, bg-color, open));\r\n\r\n\t\t> .menu-heading,\r\n\t\t> .menu-link {\r\n\t\t\t@include attr(background-color, get($item, link, self, bg-color, open));\r\n\r\n\t\t\t// menu item link's text part\r\n\t\t\t.menu-text {\r\n\t\t\t\t@include attr(color, get($item, link, text, font-color, open));\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's icon part\r\n\t\t\t.menu-icon {\r\n\t\t\t\t@include attr(color, get($item, link, icon, font-color, open));\r\n\r\n\t\t\t\t// Due-tone icon\r\n\t\t\t\t&.svg-icon {\r\n\t\t\t\t\t@include svg-icon-color(get($item, link, icon, font-color, open));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's bullet\r\n\t\t\t.menu-bullet {\r\n\t\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\t@include attr(background-color, get($item, link, bullet, dot, bg-color, open));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-bullet-line {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\t@include attr(background-color, get($item, link, bullet, line, bg-color, open));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's arrow part\r\n\t\t\t.menu-arrow {\r\n\t\t\t\t@include attr(color, get($item, link, arrow, font-color, open));\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// item link open state\r\n\t&.menu-item-here {\r\n\t\ttransition: background-color 0.3s;\r\n\t\t@include attr(background-color, get($item, self, bg-color, here));\r\n\r\n\t\t> .menu-heading,\r\n\t\t> .menu-link {\r\n\t\t\t@include attr(background-color, get($item, link, self, bg-color, here));\r\n\r\n\t\t\t// menu item link's text part\r\n\t\t\t.menu-text {\r\n\t\t\t\t@include attr(color, get($item, link, text, font-color, here));\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's icon part\r\n\t\t\t.menu-icon {\r\n\t\t\t\t@include attr(color, get($item, link, icon, font-color, here));\r\n\r\n\t\t\t\t// Due-tone icon\r\n\t\t\t\t&.svg-icon {\r\n\t\t\t\t\t@include svg-icon-color(get($item, link, icon, font-color, here));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's bullet\r\n\t\t\t.menu-bullet {\r\n\t\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\t@include attr(background-color, get($item, link, bullet, dot, bg-color, here));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-bullet-line {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\t@include attr(background-color, get($item, link, bullet, line, bg-color, here));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's arrow part\r\n\t\t\t.menu-arrow {\r\n\t\t\t\t@include attr(color, get($item, link, arrow, font-color, here));\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// item link active state\r\n\t&.menu-item-active {\r\n\t\ttransition: background-color 0.3s;\r\n\t\t@include attr(background-color, get($item, self, bg-color, active));\r\n\r\n\t\t> .menu-heading,\r\n\t\t> .menu-link {\r\n\t\t\t@include attr(background-color, get($item, link, self, bg-color, active));\r\n\r\n\t\t\t// menu item link's text part\r\n\t\t\t.menu-text {\r\n\t\t\t\t@include attr(color, get($item, link, text, font-color, active));\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's icon part\r\n\t\t\t.menu-icon {\r\n\t\t\t\t@include attr(color, get($item, link, icon, font-color, active));\r\n\r\n\t\t\t\t// Due-tone icon\r\n\t\t\t\t&.svg-icon {\r\n\t\t\t\t\t@include svg-icon-color(get($item, link, icon, font-color, active));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's bullet\r\n\t\t\t.menu-bullet {\r\n\t\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\t@include attr(background-color, get($item, link, bullet, dot, bg-color, active));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-bullet-line {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\t@include attr(background-color, get($item, link, bullet, line, bg-color, active));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's arrow part\r\n\t\t\t.menu-arrow {\r\n\t\t\t\t@include attr(color, get($item, link, arrow, font-color, active));\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// item link hover state\r\n\t&:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover {\r\n\t\ttransition: background-color 0.3s;\r\n\t\t@include attr(background-color, get($item, self, bg-color, hover));\r\n\r\n\t\t> .menu-heading,\r\n\t\t> .menu-link {\r\n\t\t\t@include attr(background-color, get($item, link, self, bg-color, hover));\r\n\r\n\t\t\t// menu item link's text part\r\n\t\t\t.menu-text {\r\n\t\t\t\t@include attr(color, get($item, link, text, font-color, hover));\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's icon part\r\n\t\t\t.menu-icon {\r\n\t\t\t\t@include attr(color, get($item, link, icon, font-color, hover));\r\n\r\n\t\t\t\t// Due-tone icon\r\n\t\t\t\t&.svg-icon {\r\n\t\t\t\t\t@include svg-icon-color(get($item, link, icon, font-color, hover));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's bullet\r\n\t\t\t.menu-bullet {\r\n\t\t\t\t&.menu-bullet-dot {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\t@include attr(background-color, get($item, link, bullet, dot, bg-color, hover));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-bullet-line {\r\n\t\t\t\t\t> span {\r\n\t\t\t\t\t\t@include attr(background-color, get($item, link, bullet, line, bg-color, hover));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// menu item link's arrow part\r\n\t\t\t.menu-arrow {\r\n\t\t\t\t@include attr(color, get($item, link, arrow, font-color, hover));\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Section\r\n@mixin menu-ver-section-base($section) {\r\n\tmargin: get($section, self, margin);\r\n\theight: get($section, self, height);\r\n\r\n\t.menu-text {\r\n\t\tfont-size: get($section, text, font-size);\r\n\t\tfont-weight: get($section, text, font-weight);\r\n\t\ttext-transform: get($section, text, font-transform);\r\n\t\tletter-spacing: get($section, text, letter-spacing);\r\n\t}\r\n\r\n\t@if has($section, icon) {\r\n\t\t.menu-icon {\r\n\t\t\tpadding: get($section, icon, padding);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin menu-ver-section-theme($section) {\r\n\t.menu-text {\r\n\t\t@include attr(color, get($section, text, font-color));\r\n\t}\r\n\r\n\t@if has($section, icon) {\r\n\t\t.menu-icon {\r\n\t\t\t@include attr(color, get($section, icon, font-color));\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Separator\r\n@mixin menu-ver-separator-base($separator) {\r\n\tmargin: get($separator, margin);\r\n\r\n\t.menu-separator-marginless {\r\n\t\tmargin: 0;\r\n\t}\r\n}\r\n\r\n@mixin menu-ver-separator-theme($separator) {\r\n\t@include attr(border-bottom, get($separator, border));\r\n}\r\n\r\n// Minimize Parent Item\r\n@mixin menu-ver-minimize-parent-item-base($item) {\r\n\t// item\r\n\tmargin: get($item, self, margin);\r\n\r\n\t// item link and heading\r\n\t> .menu-link {\r\n\t\theight: get($item, link, self, height);\r\n\t\tpadding: get($item, link, self, padding);\r\n\r\n\t\t// menu item link's text part\r\n\t\t.menu-text {\r\n\t\t\tfont-weight: get($item, link, text, font-weight);\r\n\t\t\tfont-size: get($item, link, text, font-size);\r\n\t\t\ttext-transform: get($item, link, text, font-transform);\r\n\t\t\tcursor: text !important;\r\n\t\t}\r\n\r\n\t\t// menu item link's icon part\r\n\t\t.menu-label {\r\n\t\t\tpadding: get($item, link, label, padding);\r\n\t\t\ttext-align: get($item, link, label, align);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin menu-ver-minimize-parent-item-theme($item) {\r\n\t// item\r\n\t@include attr(background-color, get($item, self, bg-color, default));\r\n\r\n\t// item link and heading\r\n\t> .menu-link {\r\n\t\t// menu item link's text part\r\n\t\t> .menu-text {\r\n\t\t\t@include attr(color, get($item, link, text, font-color, default));\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Base\r\n@mixin menu-ver-base($base-config, $layout) {\r\n\t.#{get($base-config, class)} {\r\n\t\t// menu nav\r\n\t\t.menu-nav {\r\n\t\t\tmargin: 0;\r\n\t\t\tlist-style: none;\r\n\t\t\tpadding: get($layout, default, self, padding);\r\n\r\n\t\t\t// Base markup\r\n\t\t\t.menu-scroll {\r\n\t\t\t\tposition: relative;\r\n\t\t\t\toverflow: hidden;\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tflex-direction: column;\r\n\t\t\t\tflex-grow: 1;\r\n\t\t\t}\r\n\r\n\t\t\t.menu-subnav {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tflex-direction: column;\r\n\t\t\t\tflex-grow: 1;\r\n\t\t\t\tpadding: 0;\r\n\t\t\t\tmargin: 0;\r\n\t\t\t\tlist-style: none !important;\r\n\t\t\t}\r\n\r\n\t\t\t// general submenu\r\n\t\t\t.menu-inner,\r\n\t\t\t.menu-submenu {\r\n\t\t\t\tdisplay: none;\r\n\t\t\t\tfloat: none;\r\n\t\t\t\tmargin: 0;\r\n\t\t\t\tpadding: 0;\r\n\r\n\t\t\t\t@if get($base-config, mode) == \"tablet-and-mobile\" or get($base-config, mode) == \"mobile\" {\r\n\t\t\t\t\twidth: auto !important;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Content\r\n\t\t\t\t.menu-content {\r\n\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\tmargin: 0;\r\n\r\n\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\t\tlist-style: none;\r\n\r\n\t\t\t\t\t\t&.menu-headingless {\r\n\t\t\t\t\t\t\t> .menu-inner {\r\n\t\t\t\t\t\t\t\tdisplay: flex;\r\n\r\n\t\t\t\t\t\t\t\t> li > .menu-link {\r\n\t \t\t\t\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// general item\r\n\t\t\t.menu-item {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tflex-direction: column;\r\n\t\t\t\tflex-grow: 1;\r\n\t\t\t\tfloat: none;\r\n\t\t\t\tpadding: 0;\r\n\r\n\t\t\t\t// item link and heading\r\n\t\t\t\t> .menu-heading,\r\n\t\t\t\t> .menu-link {\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\tflex-grow: 1;\r\n\t\t\t\t\talign-items: stretch;\r\n\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\ttext-decoration: none;\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\toutline: none;\r\n\r\n\t\t\t\t\t&:hover {\r\n\t\t\t\t\t\ttext-decoration: none;\r\n\t\t\t\t\t\tcursor: pointer;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t.menu-text {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\tflex-grow: 1;\r\n\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t.menu-label {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\twhite-space: nowrap;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// menu item link's icon part\r\n\t\t\t\t\t.menu-icon {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\tline-height: 0;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// menu item link's icon part\r\n\t\t\t\t\t.menu-bullet {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\tline-height: 0;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// menu item link's arrow part\r\n\t\t\t\t\t.menu-arrow {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\tjustify-content: flex-end;\r\n\t\t\t\t\t\tline-height: 0;\r\n\r\n\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\t-webkit-transform: translate3d(0,0,0);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// item link open state\r\n\t\t\t\t&.menu-item-open {\r\n\t\t\t\t\t> .menu-heading,\r\n\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\t// menu item link's arrow part\r\n\t\t\t\t\t\t> .menu-arrow {\r\n\t\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\t\ttransform: rotateZ(90deg)#{'/*rtl:ignore*/'};\r\n\r\n\t\t\t\t\t\t\t\t[direction=\"rtl\"] & {\r\n\t\t\t\t\t\t\t\t\ttransform: rotateZ(-90deg)#{'/*rtl:ignore*/'};\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t> .menu-submenu,\r\n\t\t\t\t\t> .menu-inner {\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\tflex-grow: 1;\r\n\t\t\t\t\t\tflex-direction: column;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// submenu items\r\n\t\t\t\t.menu-submenu {\r\n\t\t\t\t\t// submenu item\r\n\t\t\t\t\t.menu-item {\r\n\t\t\t\t\t\t// item link and heading\r\n\t\t\t\t\t\t> .menu-heading,\r\n\t\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\t\tpadding: get($layout, default, item, submenu, item, link, padding);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// parent item used for minimized menu's dropdown submenus\r\n\t\t\t\t\t.menu-item-parent {\r\n\t\t\t\t\t\tdisplay: none;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// general section\r\n\t\t\t.menu-section {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tpadding: get($layout, default, section, self, padding);\r\n\r\n\t\t\t\t&.menu-section-first {\r\n\t\t\t\t\tmargin-top: 0 !important;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.menu-text {\r\n\t\t\t\t\tdisplay:flex;\r\n\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.menu-icon {\r\n\t\t\t\t\tdisplay: none;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// general separator\r\n\t\t\t.menu-separator {\r\n\t\t\t\theight: 0;\r\n\t\t\t\toverflow: hidden;\r\n\r\n\t\t\t\t&.menu-separator-marginless {\r\n\t\t\t\t\tmargin: 0;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// Custom markup\r\n\t\t\t// menu item\r\n\t\t\t> .menu-item {\r\n\t\t\t\tposition: relative;\r\n\t\t\t\t@include menu-ver-item-base(get($layout, default, item));\r\n\r\n\t\t\t\t.menu-submenu {\r\n\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t@include attr(margin, get($layout, default, item, submenu, self, margin));\r\n\t\t\t\t\t\t@include attr(padding, get($layout, default, item, submenu, self, padding));\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// menu item\r\n\t\t\t\t\t.menu-item {\r\n\t\t\t\t\t\t@include menu-ver-item-base(get($layout, default, item, submenu, item));\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// menu section\r\n\t\t\t\t\t.menu-section {\r\n\t\t\t\t\t\t@include menu-ver-section-base(get($layout, default, item, submenu, section));\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// menu item separator\r\n\t\t\t\t\t.menu-separator {\r\n\t\t\t\t\t\t@include menu-ver-separator-base(get($layout, default, item, submenu, separator));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// menu section\r\n\t\t\t> .menu-section {\r\n\t\t\t\t@include menu-ver-section-base(get($layout, default, section));\r\n\t\t\t}\r\n\r\n\t\t\t// menu item separator\r\n\t\t\t> .menu-separator {\r\n\t\t\t\t@include menu-ver-separator-base(get($layout, default, separator));\r\n\t\t\t}\r\n\r\n\t\t\t// submenu link paddings and indentions\r\n\t\t\t// item\r\n\t\t\t$item-link-padding: get($layout, default, item, link, self, padding);\r\n\t\t\t$item-section-padding: get($layout, default, section, self, padding);\r\n\r\n\t\t\t// item submenu\r\n\t\t\t$item-submenu-padding-left: get($layout, default, item, submenu, item, link, self, padding-x);\r\n\r\n\t\t\t$item-submenu-indent: get($layout, default, item, submenu, self, indent);\r\n\t\t\t$item-submenu-link-padding: get($layout, default, item, submenu, item, link, self, padding);\r\n\r\n\t\t\t$item-submenu-section-indent: get($layout, default, item, submenu, section, self, indent);\r\n\t\t\t$item-submenu-section-padding: get($layout, default, item, submenu, section, padding);\r\n\r\n\t\t\t> .menu-item {\r\n\t\t\t\t> .menu-link {\r\n\t\t\t\t\tpadding: $item-link-padding;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t// item link paddings\r\n\t\t\t\t\t\t.menu-content {\r\n\t\t\t\t\t\t\t.menu-heading {\r\n\t\t\t\t\t\t\t\tpadding: $item-submenu-link-padding;\r\n\t\t\t\t\t\t\t\tpadding-left: $item-submenu-padding-left + (1 * $item-submenu-section-indent);\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t.menu-inner {\r\n\t\t\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\t\t\tmargin: 0;\r\n\r\n\t\t\t\t\t\t\t\t.menu-link {\r\n\t\t\t\t\t\t\t\t\tpadding: $item-submenu-link-padding;\r\n\t\t\t\t\t\t\t\t\tpadding-left: $item-submenu-padding-left + (2 * $item-submenu-section-indent);\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\t\t\tpadding: $item-submenu-link-padding;\r\n\t\t\t\t\t\t\t\tpadding-left: $item-submenu-padding-left + (1 * $item-submenu-indent);\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\t\t\tpadding: 0;\r\n\r\n\t\t\t\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t\t\t\tpadding: 0;\r\n\r\n\t\t\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\t\t\t\t\t\tpadding: $item-submenu-link-padding;\r\n\t\t\t\t\t\t\t\t\t\t\tpadding-left: $item-submenu-padding-left + (2 * $item-submenu-indent);\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\t\t\t\t\t\tpadding: 0;\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpadding: $item-submenu-link-padding;\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpadding-left: $item-submenu-padding-left + (3 * $item-submenu-indent);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t// section paddings\r\n\t\t\t\t\t\t> .menu-section {\r\n\t\t\t\t\t\t\tpadding: $item-submenu-section-padding;\r\n\t\t\t\t\t\t\tpadding-left:$item-submenu-padding-left + (1 * $item-submenu-section-indent);\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t\t\t\t> .menu-section {\r\n\t\t\t\t\t\t\t\t\t\tpadding: $item-submenu-section-padding;\r\n\t\t\t\t\t\t\t\t\t\tpadding-left: $item-submenu-padding-left + (2 * $item-submenu-section-indent);\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\t\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t\t\t\t\t\t\t> .menu-section {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tpadding: $item-submenu-section-padding;\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tpadding-left:$item-submenu-padding-left + (3 * $item-submenu-section-indent);\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin menu-ver-theme($base-config, $layout) {\r\n\t.#{get($base-config, class)} {\r\n\t\t@include attr(background-color, get($layout, default, self, bg-color));\r\n\r\n\t\t.menu-nav {\r\n\t\t\t// menu item\r\n\t\t\t> .menu-item {\r\n\t\t\t\t@include menu-ver-item-theme(get($layout, default, item));\r\n\r\n\t\t\t\t> .menu-arrow {\r\n\t\t\t\t\tcolor: get($layout, default, self, bg-color);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// menu section\r\n\t\t\t> .menu-section {\r\n\t\t\t\t@include menu-ver-section-theme(get($layout, default, section));\r\n\t\t\t}\r\n\r\n\t\t\t// menu item separator\r\n\t\t\t> .menu-separator {\r\n\t\t\t\t@include menu-ver-separator-theme(get($layout, default, separator));\r\n\t\t\t}\r\n\r\n\t\t\t// menu item\r\n\t\t\t> .menu-item {\r\n\t\t\t\t.menu-submenu {\r\n\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t@include attr(background-color, get($layout, default, item, submenu, self, bg-color, default));\r\n\t\t\t\t\t}\r\n\t\t\t\t\t// menu item\r\n\t\t\t\t\t.menu-item {\r\n\t\t\t\t\t\t@include menu-ver-item-theme(get($layout, default, item, submenu, item));\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// menu section\r\n\t\t\t\t\t.menu-section {\r\n\t\t\t\t\t\t@include menu-ver-section-theme(get($layout, default, item, submenu, section));\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// menu item separator\r\n\t\t\t\t\t.menu-separator {\r\n\t\t\t\t\t\t@include menu-ver-separator-theme(get($layout, default, item, submenu, separator));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Dropdown\r\n@mixin menu-ver-dropdown-base($base-config, $layout) {\r\n\t// base dropdown submenu\r\n\t.#{get($base-config, parent-class)}-minimize .#{get($base-config, class)},\r\n\t.#{get($base-config, class)}.#{get($base-config, class)}-dropdown {\r\n\t\t.menu-nav {\r\n\t\t\t.menu-item:not([data-menu-submenu-mode=accordion]) {\r\n\t\t\t\t> .menu-link {\r\n\t\t\t\t\t> .menu-arrow {\r\n\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\t@include fix-animation-lags();\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\tdisplay: none !important;\r\n\t\t\t\t\t@include fix-animation-lags();\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-item-hover {\r\n\t\t\t\t\tposition: relative;\r\n\r\n\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\ttop: get($layout, dropdown, item, submenu, self, offset, inner, default);\r\n\t\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\t\tz-index: get($layout, dropdown, item, self, zindex);\r\n\t\t\t\t\t\tdisplay: flex !important;\r\n\t\t\t\t\t\twidth: get($layout, dropdown, item, submenu, self, width);\r\n\t\t\t\t\t\tmargin-left: get($layout, dropdown, item, submenu, self, width);\r\n\t\t\t\t\t\t@include border-radius(get($layout, dropdown, item, submenu, self, border-radius));\r\n\r\n\t\t\t\t\t\t&.menu-submenu-up {\r\n\t\t\t\t\t\t\tbottom: 0;\r\n\t\t\t\t\t\t\ttop: auto;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t \tanimation:#{get($base-config, class)}-submenu-fade-in .3s ease 1, #{get($base-config, class)}-submenu-move-up .3s ease-out 1;\r\n\r\n\t\t\t\t\t \t&.menu-submenu-up {\r\n\t\t\t\t\t \t\ttop: auto;\r\n\t\t\t\t\t \t\tbottom: get($layout, dropdown, item, submenu, self, offset, inner, up);\r\n\t\t\t\t\t \t\tanimation: #{get($base-config, class)}-submenu-fade-in .3s ease 1, #{get($base-config, class)}-submenu-move-down .3s ease-out 1;\r\n\r\n\t \t@include for-ie11 {\r\n\t \tanimation: none;\r\n\t \t}\r\n\t\t\t\t\t \t}\r\n\r\n\t\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t\tpadding: get($layout, dropdown, item, submenu, self, padding);\r\n\r\n\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\t.menu-link {\r\n\t\t\t\t\t\t\t\t\tjustify-content: flex-start;\r\n\t\t\t\t\t\t\t\t\tpadding: get($layout, dropdown, item, submenu, item, link, self, padding);\r\n\r\n\t\t\t\t\t\t\t\t\t.link-title {\r\n\t\t\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t.menu-text {\r\n\t\t\t\t\t\t\t\t\t\t@include fix-animation-lags();\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t.menu-icon {\r\n\t\t\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t.menu-bullet {\r\n\t\t\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t.menu-label {\r\n\t\t\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t.menu-arrow {\r\n\t\t\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t.menu-submenu {\r\n\t\t\t\t\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t\t\t\t\tpadding: get($layout, dropdown, item, submenu, self, padding);\r\n\r\n\t\t\t\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\t\t\t\t\t\t\tpadding: get($layout, dropdown, item, submenu, item, link, self, padding);\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t.menu-submenu {\r\n\t\t\t\t\t\t\t\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tpadding: get($layout, dropdown, item, submenu, self, padding);\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t> .menu-item {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpadding: get($layout, dropdown, item, submenu, item, link, self, padding);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t\t> .menu-section {\r\n\t\t\t\t\t\t\t\t\t\t\tpadding: get($layout, dropdown, item, submenu, section, self, padding);\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t@include menu-ver-item-base(get($layout, dropdown, item, submenu, item));\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t> .menu-section {\r\n\t\t\t\t\t\t\t\t@include menu-ver-section-base( get($layout, dropdown, item, submenu, section) );\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t> .menu-separator {\r\n\t\t\t\t\t\t\t\t@include menu-ver-separator-base( get($layout, dropdown, item, submenu, separator) );\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t> .menu-item:not([data-menu-submenu-mode=accordion]) {\r\n\t\t\t\t&.menu-item-hover {\r\n\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\tmargin-left: get($layout, dropdown, item, submenu, self, parent-width);\r\n\t\t\t\t\t\ttop: get($layout, dropdown, item, submenu, self, offset, root, default);\r\n\r\n\t\t\t\t\t\t&.menu-submenu-up {\r\n\t\t\t\t\t\t\tbottom: get($layout, dropdown, item, submenu, self, offset, root, up);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin menu-ver-dropdown-theme($base-config, $layout) {\r\n\t.#{get($base-config, parent-class)}-minimize .#{get($base-config, class)},\r\n\t.#{get($base-config, class)}.#{get($base-config, class)}-dropdown {\r\n\t\t.menu-nav {\r\n\t\t\t.menu-item:not([data-menu-submenu-mode=accordion]) {\r\n\t\t\t\t&.menu-item-hover {\r\n\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\tbackground-color: get($layout, dropdown, item, submenu, self, bg-color);\r\n\t\t\t\t\t\tbox-shadow: get($layout, dropdown, item, submenu, self, box-shadow);\r\n\r\n\t\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t\t.menu-item {\r\n\t\t\t\t\t\t\t\t@include menu-ver-item-theme( get($layout, dropdown, item, submenu, item) );\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t.menu-section {\r\n\t\t\t\t\t\t\t\t@include menu-ver-section-theme( get($layout, dropdown, item, submenu, section) );\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t.menu-separator {\r\n\t\t\t\t\t\t\t\t@include menu-ver-separator-theme( get($layout, dropdown, item, submenu, separator) );\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Minimize\r\n@mixin menu-ver-minimize-base($base-config, $layout) {\r\n\t.#{get($base-config, class)} {\r\n\t\t.menu-nav {\r\n\t\t\tpadding: get($layout, minimize, self, padding);\r\n\r\n\t\t\t> .menu-item {\r\n\t\t\t\t> .menu-link {\r\n\t\t\t\t\t.menu-icon {\r\n\t\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t.menu-bullet {\r\n\t\t\t\t\t\tdisplay: none;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t.menu-text {\r\n\t\t\t\t\t\tdisplay: none;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t.menu-label {\r\n\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\tposition: relative;\r\n\t\t\t\t\t\tright: get($layout, minimize, item, link, label, right);\r\n\r\n\t\t\t\t\t\t.label {\r\n\t\t\t\t\t\t\ttext-indent: -9999px;\r\n\t\t\t\t\t\t\tposition: relative;\r\n\t\t\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\t\t\tmin-width: get($layout, minimize, item, link, label, size);\r\n\t\t\t\t\t\t\twidth: get($layout, minimize, item, link, label, size);\r\n\t\t\t\t\t\t\tmin-height: get($layout, minimize, item, link, label, size);\r\n\t\t\t\t\t\t\theight: get($layout, minimize, item, link, label, size);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t.menu-arrow {\r\n\t\t\t\t\t\tdisplay: none;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\tdisplay: none !important;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-item-here {\r\n\t\t\t\t\t> .menu-arrow {\r\n\t\t\t\t\t\tdisplay: inline-block;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-item-hover {\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\tz-index: get($layout, minimize, item, self, zindex);\r\n\t\t\t\t\twidth: get($layout, minimize, item, self, width);\r\n\r\n\t\t\t\t\t&.menu-item-open {\r\n\t\t\t\t\t\tbackground: transparent;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\twidth: get($layout, minimize, self, width);\r\n\r\n\t\t\t\t\t\t.link-title {\r\n\t\t\t\t\t\t\tdisplay: none;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t> .menu-submenu {\r\n\t\t\t\t\t\ttop: 0;\r\n\t\t\t\t\t\tbottom: auto;\r\n\t\t\t\t\t\tdisplay: flex !important;\r\n\t\t\t\t\t\tmargin-left: get($layout, minimize, item, submenu, self, margin-left) !important;\r\n\r\n\t\t\t\t\t\t@if has($layout, minimize, item, submenu) {\r\n\t\t\t\t\t\t\t.menu-subnav {\r\n\t\t\t\t\t\t\t\t> .menu-item.menu-item-parent {\r\n\t\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\t\t@include menu-ver-minimize-parent-item-base( get($layout, minimize, item, submenu, parent-item) );\r\n\r\n\t\t\t\t\t\t\t\t\t& + .menu-item {\r\n\t\t\t\t\t\t\t\t\t\tmargin-top: get($layout, minimize, item, submenu, parent-item, link, self, margin-bottom);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t> .menu-arrow {\r\n\t\t\t\t\t\tdisplay: none;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t> .menu-section {\r\n\t\t\t\tjustify-content: center;\r\n\r\n\t\t\t\t.menu-text {\r\n\t\t\t\t\tdisplay: none;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.menu-icon {\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t\tpadding: get($layout, minimize, section, icon, padding);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin menu-ver-minimize-theme($base-config, $layout) {\r\n\t.#{get($base-config, class)} {\r\n\t\t// base vertical menu\r\n\t\t.menu-nav {\r\n\t\t\t> .menu-item {\r\n\t\t\t\tbackground: transparent;\r\n\r\n\t\t\t\t> .menu-link {\r\n\t\t\t\t\tbackground-color: get($layout, minimize, item, link, self, bg-color, default);\r\n\r\n\t\t\t\t\t> .menu-icon {\r\n\t\t\t\t\t\tcolor: get($layout, minimize, item, link, icon, font-color, default);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-item-hover,\r\n\t\t\t\t&.menu-item-open {\r\n\t\t\t\t\tbackground: transparent !important;\r\n\r\n\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\tbackground-color: get($layout, minimize, item, link, self, bg-color, open);\r\n\r\n\t\t\t\t\t\t> .menu-icon {\r\n\t\t\t\t\t\t\t@include attr(color, get($layout, minimize, item, link, icon, font-color, open));\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.menu-item-here,\r\n\t\t\t\t&.menu-item-active {\r\n\t\t\t\t\tbackground: transparent !important;\r\n\r\n\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\tbackground-color: get($layout, minimize, item, link, self, bg-color, active);\r\n\r\n\t\t\t\t\t\t> .menu-icon {\r\n\t\t\t\t\t\t\t@include attr(color, get($layout, minimize, item, link, icon, font-color, active));\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&:hover {\r\n\t\t\t\t\tbackground: transparent;\r\n\r\n\t\t\t\t\t> .menu-link {\r\n\t\t\t\t\t\tbackground-color: get($layout, minimize, item, link, self, bg-color, hover);\r\n\r\n\t\t\t\t\t\t> .menu-icon {\r\n\t\t\t\t\t\t\t@include attr(color, get($layout, minimize, item, link, icon, font-color, hover), !important);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t@if has($layout, minimize, item, submenu) {\r\n\t\t\t\t\t&.menu-item-hover > .menu-submenu {\r\n\t\t\t\t\t\t.menu-subnav > .menu-item.menu-item-parent {\r\n\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t@include menu-ver-minimize-parent-item-theme( get($layout, minimize, item, submenu, parent-item) );\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t> .menu-section {\r\n\t\t\t\t.menu-icon {\r\n\t\t\t\t\tcolor: get($layout, minimize, section, icon, font-color);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Build\r\n// Custom theme\r\n@mixin menu-ver-build-theme($config, $theme) {\r\n\t$theme-config: ();\r\n\r\n\t@if ($theme == default) {\r\n\t\t$theme-config: get($config, build, theme);\r\n\t} @else {\r\n\t\t$theme-config: get($config, build, themes, $theme);\r\n\t}\r\n\r\n\t@if (get($config, base, mode) == general) {\r\n\t\t@include menu-ver-theme((class: get($config, base, class)), $theme-config);\r\n\t} @else if (get($config, base, mode) == tablet-and-mobile) {\r\n\t\t// Tablet & Mobile Modes\r\n\t\t@include media-breakpoint-down(md) {\r\n\t\t\t@include menu-ver-theme((class: get($config, base, class)), $theme-config);\r\n\t\t}\r\n\t} @else if (get($config, base, mode) == mobile) {\r\n\t\t// Mobile mode\r\n\t\t@include media-breakpoint-down(sm) {\r\n\t\t\t@include menu-ver-theme((class: get($config, base, class)), $theme-config);\r\n\t\t}\r\n\t}\r\n\r\n\t@if (has($theme-config, minimize)) {\r\n\t\t// Desktop Mode\r\n\t\t@include media-breakpoint-up(lg) {\r\n\t\t\t.#{get($config, base, parent-class)}-minimize {\r\n\t\t\t\t@include menu-ver-minimize-theme((class: get($config, base, class), parent-class: get($config, base, parent-class)), $theme-config);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@if (has($theme-config, dropdown)) {\r\n\t\t// Desktop Mode\r\n\t\t@include media-breakpoint-up(lg) {\r\n\t\t\t@include menu-ver-dropdown-theme((class: get($config, base, class), parent-class: get($config, base, parent-class)), $theme-config);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Build Layout\r\n@mixin menu-ver-build-layout( $config ) {\r\n\t// Base menu\r\n\t@if (get($config, base, mode) == general) {\r\n\t\t@include menu-ver-base( get($config, base), get($config, build, layout) );\r\n\t} @else if (get($config, base, mode) == tablet-and-mobile) {\r\n\t\t// Tablet & Mobile Modes\r\n\t\t@include media-breakpoint-down(md) {\r\n\t\t\t@include menu-ver-base( get($config, base), get($config, build, layout) );\r\n\t\t}\r\n\t} @else if (get($config, base, mode) == mobile) {\r\n\t\t// Mobile mode\r\n\t\t@include media-breakpoint-down(sm) {\r\n\t\t\t@include menu-ver-base( get($config, base), get($config, build, layout) );\r\n\t\t}\r\n\t}\r\n\r\n\t// Base dropdown menu submenu mode\r\n\t@if (has($config, build, layout, dropdown)) {\r\n\t\t// Desktop Mode\r\n\t\t@include media-breakpoint-up(lg) {\r\n\t\t\t@include menu-ver-dropdown-base( get($config, base), get($config, build, layout) );\r\n\t\t}\r\n\r\n\t\t// Dropdown Submenu Animations\r\n\t\t@keyframes #{get($config, base, class)}-submenu-fade-out {\r\n\t\t from { opacity: 1; }\r\n\t\t to { opacity: 0; }\r\n\t\t}\r\n\r\n\t\t@keyframes #{get($config, base, class)}-submenu-fade-in {\r\n\t\t from { opacity: 0; }\r\n\t\t to { opacity: 1; }\r\n\t\t}\r\n\r\n\t\t@keyframes #{get($config, base, class)}-submenu-move-up {\r\n\t\t from { margin-top: get($config, build, layout, dropdown, item, submenu, self, animation, offset); }\r\n\t\t to { margin-top: 0; }\r\n\t\t}\r\n\r\n\t\t@keyframes #{get($config, base, class)}-submenu-move-down {\r\n\t\t from { margin-bottom: get($config, build, layout, dropdown, item, submenu, self, animation, offset); }\r\n\t\t to { margin-bottom: 0; }\r\n\t\t}\r\n\t}\r\n\r\n\t// Base minimize menu mode\r\n\t@if (has($config, build, layout, minimize)) {\r\n\t\t// Desktop Mode\r\n\t\t@include media-breakpoint-up(lg) {\r\n\t\t\t.#{get($config, base, parent-class)}-minimize {\r\n\t\t\t\t@include menu-ver-minimize-base( get($config, base), get($config, build, layout) );\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","//\r\n// Offcanvas\r\n//\r\n\r\n@mixin offcanvas-base($class, $config) {\r\n\t$width: get($config, width);\r\n\t$height: get($config, height);\r\n\r\n\t$offset: 20px;\r\n\t$transition: left 0.3s ease, right 0.3s ease, bottom 0.3s ease, top 0.3s ease;\r\n\r\n\t.#{$class} {\r\n\t\tz-index: get($config, zindex);\r\n\t\tposition: fixed;\r\n\t\ttop: 0;\r\n\t\tbottom: 0;\r\n\t\t//overflow-y: auto;\r\n\t\ttransition: $transition;\r\n\r\n\t\t@if $width != null {\r\n\t\t\tleft: -($width + $offset);\r\n\t\t\twidth: $width;\r\n\t\t}\r\n\r\n\t\t@if $height != null {\r\n\t\t\theight: $height;\r\n\t\t}\r\n\r\n\t\t&.#{$class}-on {\r\n\t\t\ttransition: $transition;\r\n\t\t\tleft: 0;\r\n\t\t}\r\n\r\n\t\t@include for-ie11 {\r\n\t\t\ttransition: none !important;\r\n\t\t}\r\n\t}\r\n\r\n\t@if $width != null {\r\n\t\t// Right Direction\r\n\t\t.#{$class}.#{$class}-right {\r\n\t\t\tright: -($width + $offset);\r\n\t\t\tleft: auto;\r\n\r\n\t\t\t&.#{$class}-on {\r\n\t\t\t\ttransition: $transition;\r\n\t\t\t\tright: 0;\r\n\t\t\t\tleft: auto;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@if $height != null {\r\n\t\t// Top Direction\r\n\t\t.#{$class}.#{$class}-top {\r\n\t\t\ttop: -($height + $offset);\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\r\n\t\t\t&.#{$class}-on {\r\n\t\t\t\ttransition: $transition;\r\n\t\t\t\ttop: 0;\r\n\t\t\t\tleft: 0;\r\n\t\t\t\tright: 0;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// Bottom Direction\r\n\t\t.#{$class}.#{$class}-bottom {\r\n\t\t\tbottom: -($height + $offset);\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\r\n\t\t\t&.#{$class}-on {\r\n\t\t\t\ttransition: $transition;\r\n\t\t\t\tbottom: 0;\r\n\t\t\t\tleft: 0;\r\n\t\t\t\tright: 0;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// Overlay\r\n\t.#{$class}-overlay {\r\n\t\tposition: fixed;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tbottom: 0;\r\n\t\tright: 0;\r\n\t\toverflow: hidden;\r\n\t\tz-index: get($config, zindex) - 1;\r\n\t\tanimation: animation-offcanvas-fade-in .6s ease 1;\r\n\t}\r\n\r\n\t// Animation\r\n\t@keyframes animation-offcanvas-fade-in {\r\n\t from { opacity: 0; }\r\n\t to { opacity: 1; }\r\n\t}\r\n}\r\n\r\n@mixin offcanvas-width($class, $width) {\r\n\t.#{$class} {\r\n\t\twidth: $width;\r\n\t\tleft: -($width + 20px);\r\n\r\n\t\t&.#{$class}-on {\r\n\t\t\tleft: 0;\r\n\t\t}\r\n\t}\r\n\r\n\t// Right Direction\r\n\t.#{$class}.#{$class}-right {\r\n\t\tright: -($width + 20px);\r\n\t\tleft: auto;\r\n\r\n\t\t&.#{$class}-on {\r\n\t\t\tright: 0;\r\n\t\t\tleft: auto;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin offcanvas-height($class, $height) {\r\n\t// Top Direction\r\n\t.#{$class}.#{$class}-top {\r\n\t\ttop: -($height + $offset);\r\n\t\tleft: 0;\r\n\t\tright: 0;\r\n\r\n\t\t&.#{$class}-on {\r\n\t\t\ttransition: $transition;\r\n\t\t\ttop: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\t\t}\r\n\t}\r\n\r\n\t// Bottom Direction\r\n\t.#{$class}.#{$class}-bottom {\r\n\t\tbottom: -($height + $offset);\r\n\t\tleft: 0;\r\n\t\tright: 0;\r\n\r\n\t\t&.#{$class}-on {\r\n\t\t\ttransition: $transition;\r\n\t\t\tbottom: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin offcanvas-theme($class, $config) {\r\n\t.#{$class} {\r\n\t\t@if (has($config, bg-color)) {\r\n\t\t\tbackground: get($config, bg-color);\r\n\t\t}\r\n\r\n\t\t@if (has($config, shadow)) {\r\n\t\t\tbox-shadow: get($config, shadow);\r\n\t\t}\r\n\t}\r\n\r\n\t.#{$class}-overlay {\r\n\t\tbackground: get($config, overlay-bg-color);\r\n\t}\r\n}\r\n\r\n@mixin offcanvas-build($class, $mode, $config) {\r\n\t@if $mode == default {\r\n\t\t// Default Mode\r\n\t\t@include offcanvas-base($class, $config);\r\n\t\t@include offcanvas-theme($class, $config);\r\n\t}\r\n\r\n\t@if $mode == desktop {\r\n\t\t// Desktop Mode\r\n\t\t@include media-breakpoint-up(lg) {\r\n\t\t\t@include offcanvas-base($class, $config);\r\n\t\t\t@include offcanvas-theme($class, $config);\r\n\t\t}\r\n\t}\r\n\r\n\t@if $mode == desktop-and-tablet {\r\n\t\t// Desktop & Tablet Modes\r\n\t\t@include media-breakpoint-up(md) {\r\n\t\t\t@include offcanvas-base($class, $config);\r\n\t\t\t@include offcanvas-theme($class, $config);\r\n\t\t}\r\n\t}\r\n\r\n\t@if $mode == tablet {\r\n\t\t// Tablet Mode\r\n\t\t@include media-breakpoint-between(md, lg) {\r\n\t\t\t@include offcanvas-base($class, $config);\r\n\t\t\t@include offcanvas-theme($class, $config);\r\n\t\t}\r\n\t}\r\n\r\n\t@if $mode == tablet-and-mobile {\r\n\t\t// Tablet & Mobile Modes\r\n\t\t@include media-breakpoint-down(md) {\r\n\t\t\t@include offcanvas-base($class, $config);\r\n\t\t\t@include offcanvas-theme($class, $config);\r\n\t\t}\r\n\t}\r\n\r\n\t@if $mode == mobile {\r\n\t\t// Mobile Mode\r\n\t\t@include media-breakpoint-down(sm) {\r\n\t\t\t@include offcanvas-base($class, $config);\r\n\t\t\t@include offcanvas-theme($class, $config);\r\n\t\t}\r\n\t}\r\n\r\n\t// Responsive Width\r\n\t@if has($config, width) {\r\n\t\t@media (max-width: get($config, width) + 50px) {\r\n\t\t\t.#{$class} {\r\n\t\t\t\twidth: 90% !important;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","//\r\n// Mixins\r\n//\r\n\r\n\r\n@mixin spinner-size($size) {\r\n\t&:before {\r\n\t\twidth: $size;\r\n \t\theight: $size;\r\n \t\tmargin-top: -($size/2);\r\n \t}\r\n\r\n\t&.spinner-center {\r\n\t\t&:before {\r\n\t\t\tleft: 50%;\r\n \t\t\tmargin-left: -($size/2);\r\n\t\t}\r\n\t}\r\n\r\n\t&.spinner-left {\r\n\t\t&:before {\r\n\t\t\tright: auto;\r\n\t\t}\r\n\t}\r\n\r\n\t&.spinner-right {\r\n\t\t&:before {\r\n\t\t\tleft: auto;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@mixin spinner-theme($color, $important: false) {\r\n\t&:before {\r\n \tborder-color: $color valueif($important, !important, null);\r\n\t\tborder-right-color: transparent;\r\n }\r\n}\r\n","//\r\n// SVG Icon\r\n//\r\n\r\n\r\n@mixin svg-icon-color($color, $important: false) {\r\n svg {\r\n g {\r\n [fill] {\r\n transition: fill 0.3s ease;\r\n fill: $color valueif($important, !important, null);\r\n }\r\n }\r\n\r\n &:hover {\r\n g {\r\n [fill] {\r\n transition: fill 0.3s ease;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@mixin svg-icon-transition() {\r\n svg {\r\n g {\r\n [fill] {\r\n transition: fill 0.3s ease;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@mixin svg-icon-size($size, $important: false) {\r\n svg {\r\n height: $size valueif($important, !important, null);\r\n width: $size valueif($important, !important, null);\r\n }\r\n}\r\n","//\r\n// Custom button variation\r\n//\r\n\r\n\r\n@mixin navi-link-theme($bullet-bg, $text-color, $icon-color, $arrow-color, $link-bg, $link-border-bottom) {\r\n @if ($bullet-bg != null) {\r\n .navi-bullet {\r\n .bullet {\r\n background-color: $bullet-bg;\r\n }\r\n }\r\n }\r\n\r\n @if ($text-color != null) {\r\n color: $text-color;\r\n\r\n .navi-text {\r\n color: $text-color;\r\n }\r\n }\r\n\r\n @if ($icon-color != null) {\r\n .navi-icon {\r\n\t\t\t// Font icon\r\n\t\t\ti {\r\n\t\t\t\tcolor: $icon-color;\r\n\t\t\t}\r\n\r\n\t\t\t// Svg icon\r\n\t\t\t@include svg-icon-color($icon-color);\r\n\t\t}\r\n }\r\n\r\n @if ($arrow-color != null) {\r\n .navi-arrow {\r\n color: $arrow-color;\r\n }\r\n }\r\n\r\n @if ($link-bg != null) {\r\n background-color: $link-bg;\r\n }\r\n\r\n @if ($link-border-bottom != null) {\r\n border-bottom: 1px solid $link-border-bottom;\r\n }\r\n}\r\n\r\n@mixin navi-icon-size($width, $font-size, $svg-size) {\r\n .navi-icon {\r\n flex: 0 0 $width;\r\n\r\n i {\r\n font-size: $font-size;\r\n }\r\n\r\n @include svg-icon-size($svg-size);\r\n }\r\n}\r\n\r\n@mixin navi-font-size($font-size) {\r\n font-size: $font-size;\r\n\r\n .navi-text {\r\n font-size: $font-size;\r\n }\r\n}\r\n\r\n@mixin navi-link-transition($transition) {\r\n transition: $transition;\r\n\r\n .navi-bullet {\r\n .bullet {\r\n transition: $transition;\r\n }\r\n }\r\n\r\n .navi-text {\r\n transition: $transition;\r\n }\r\n\r\n .navi-icon {\r\n transition: $transition;\r\n\r\n\t\ti {\r\n\t\t\ttransition: $transition;\r\n\t\t}\r\n\r\n\t\t// Svg icon\r\n\t\t.svg-icon {\r\n @include svg-icon-transition();\r\n }\r\n\t}\r\n\r\n .navi-arrow {\r\n transition: $transition;\r\n }\r\n}\r\n","//\r\n// Label\r\n//\r\n\r\n@mixin label-size($size, $font-size) {\r\n height: $size;\r\n\twidth: $size;\r\n font-size: $font-size;\r\n\r\n &.label-inline {\r\n\t\twidth: auto;\r\n }\r\n}\r\n\r\n@mixin label-dot-size($size) {\r\n line-height: $size;\r\n min-height: $size;\r\n min-width: $size;\r\n height: $size;\r\n width: $size;\r\n}\r\n","//\r\n// Scroll Mixins\r\n//\r\n\r\n// Theme\r\n@mixin perfect-scrollbar-theme($color) {\r\n &.ps {\r\n > .ps__rail-x {\r\n background-color: transparent;\r\n\r\n &:hover,\r\n &:focus {\r\n opacity: 1;\r\n background-color: transparent;\r\n\r\n > .ps__thumb-x {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n > .ps__thumb-x {\r\n background-color: $color;\r\n opacity: 1;\r\n\r\n &:hover,\r\n &:focus {\r\n opacity: 1;\r\n background-color: $color;\r\n }\r\n }\r\n }\r\n\r\n > .ps__rail-y {\r\n background-color: transparent;\r\n\r\n &:hover,\r\n &:focus {\r\n background-color: transparent;\r\n opacity: 1;\r\n\r\n > .ps__thumb-y {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n > .ps__thumb-y {\r\n background: $color;\r\n opacity: 1;\r\n\r\n &:hover,\r\n &:focus {\r\n opacity: 1;\r\n background: $color;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@mixin perfect-scrollbar-ver-size($size) {\r\n &.ps {\r\n > .ps__rail-y {\r\n width: $size;\r\n\r\n &:hover,\r\n &:focus {\r\n width: $size;\r\n }\r\n\r\n > .ps__thumb-y {\r\n width: $size;\r\n @include border-radius($border-radius !important);\r\n\r\n &:hover,\r\n &:focus {\r\n width: $size;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@mixin perfect-scrollbar-hor-size($size) {\r\n &.ps {\r\n > .ps__rail-x {\r\n height: $size;\r\n\r\n &:hover,\r\n &:focus {\r\n height: $size;\r\n }\r\n\r\n > .ps__thumb-x {\r\n top: 0;\r\n height: $size;\r\n @include border-radius($border-radius !important);\r\n\r\n &:hover,\r\n &:focus {\r\n top: 0;\r\n height: $size;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@mixin perfect-scrollbar-ver-offset($offset) {\r\n &.ps {\r\n > .ps__rail-y {\r\n right: $offset;\r\n }\r\n }\r\n}\r\n","// Toggles\n//\n// Used in conjunction with global variables to enable certain theme features.\n\n// Vendor\n@import \"vendor/rfs\";\n\n// Deprecate\n@import \"mixins/deprecate\";\n\n// Utilities\n@import \"mixins/breakpoints\";\n@import \"mixins/hover\";\n@import \"mixins/image\";\n@import \"mixins/badge\";\n@import \"mixins/resize\";\n@import \"mixins/screen-reader\";\n@import \"mixins/size\";\n@import \"mixins/reset-text\";\n@import \"mixins/text-emphasis\";\n@import \"mixins/text-hide\";\n@import \"mixins/text-truncate\";\n@import \"mixins/visibility\";\n\n// Components\n@import \"mixins/alert\";\n@import \"mixins/buttons\";\n@import \"mixins/caret\";\n@import \"mixins/pagination\";\n@import \"mixins/lists\";\n@import \"mixins/list-group\";\n@import \"mixins/nav-divider\";\n@import \"mixins/forms\";\n@import \"mixins/table-row\";\n\n// Skins\n@import \"mixins/background-variant\";\n@import \"mixins/border-radius\";\n@import \"mixins/box-shadow\";\n@import \"mixins/gradients\";\n@import \"mixins/transition\";\n\n// Layout\n@import \"mixins/clearfix\";\n@import \"mixins/grid-framework\";\n@import \"mixins/grid\";\n@import \"mixins/float\";\n","// stylelint-disable property-blacklist, scss/dollar-variable-default\n\n// SCSS RFS mixin\n//\n// Automated font-resizing\n//\n// See https://github.com/twbs/rfs\n\n// Configuration\n\n// Base font size\n$rfs-base-font-size: 1.25rem !default;\n$rfs-font-size-unit: rem !default;\n\n// Breakpoint at where font-size starts decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n// Resize font-size based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != \"number\" or $rfs-factor <= 1 {\n @error \"`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.\";\n}\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-responsive-font-sizes to false\n$enable-responsive-font-sizes: true !default;\n\n// Cache $rfs-base-font-size unit\n$rfs-base-font-size-unit: unit($rfs-base-font-size);\n\n// Remove px-unit from $rfs-base-font-size for calculations\n@if $rfs-base-font-size-unit == \"px\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);\n}\n@else if $rfs-base-font-size-unit == \"rem\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == \"px\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == \"rem\" or $rfs-breakpoint-unit-cache == \"em\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);\n}\n\n// Responsive font-size mixin\n@mixin rfs($fs, $important: false) {\n // Cache $fs unit\n $fs-unit: if(type-of($fs) == \"number\", unit($fs), false);\n\n // Add !important suffix if needed\n $rfs-suffix: if($important, \" !important\", \"\");\n\n // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n @if not $fs-unit or $fs-unit != \"\" and $fs-unit != \"px\" and $fs-unit != \"rem\" or $fs == 0 {\n font-size: #{$fs}#{$rfs-suffix};\n }\n @else {\n // Variables for storing static and fluid rescaling\n $rfs-static: null;\n $rfs-fluid: null;\n\n // Remove px-unit from $fs for calculations\n @if $fs-unit == \"px\" {\n $fs: $fs / ($fs * 0 + 1);\n }\n @else if $fs-unit == \"rem\" {\n $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);\n }\n\n // Set default font-size\n @if $rfs-font-size-unit == rem {\n $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};\n }\n @else if $rfs-font-size-unit == px {\n $rfs-static: #{$fs}px#{$rfs-suffix};\n }\n @else {\n @error \"`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.\";\n }\n\n // Only add media query if font-size is bigger as the minimum font-size\n // If $rfs-factor == 1, no rescaling will take place\n @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {\n $min-width: null;\n $variable-unit: null;\n\n // Calculate minimum font-size for given font-size\n $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;\n\n // Calculate difference between given font-size and minimum font-size for given font-size\n $fs-diff: $fs - $fs-min;\n\n // Base font-size formatting\n // No need to check if the unit is valid, because we did that before\n $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);\n\n // If two-dimensional, use smallest of screen width and height\n $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n // Calculate the variable width between 0 and $rfs-breakpoint\n $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};\n\n // Set the calculated font-size.\n $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};\n }\n\n // Rendering\n @if $rfs-fluid == null {\n // Only render static font-size if no fluid font-size is available\n font-size: $rfs-static;\n }\n @else {\n $mq-value: null;\n\n // RFS breakpoint formatting\n @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {\n $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};\n }\n @else if $rfs-breakpoint-unit == px {\n $mq-value: #{$rfs-breakpoint}px;\n }\n @else {\n @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n }\n\n @if $rfs-class == \"disable\" {\n // Adding an extra class increases specificity,\n // which prevents the media query to override the font size\n &,\n .disable-responsive-font-size &,\n &.disable-responsive-font-size {\n font-size: $rfs-static;\n }\n }\n @else {\n font-size: $rfs-static;\n }\n\n @if $rfs-two-dimensional {\n @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n @else {\n @media (max-width: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n }\n }\n}\n\n// The font-size & responsive-font-size mixin uses RFS to rescale font sizes\n@mixin font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n\n@mixin responsive-font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n","// Deprecate mixin\n//\n// This mixin can be used to deprecate mixins or functions.\n// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to\n// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)\n@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {\n @if ($enable-deprecation-messages != false and $ignore-warning != true) {\n @warn \"#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.\";\n }\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n","// Hover mixin and `$enable-hover-media-query` are deprecated.\n//\n// Originally added during our alphas and maintained during betas, this mixin was\n// designed to prevent `:hover` stickiness on iOS-an issue where hover styles\n// would persist after initial touch.\n//\n// For backward compatibility, we've kept these mixins and updated them to\n// always return their regular pseudo-classes instead of a shimmed media query.\n//\n// Issue: https://github.com/twbs/bootstrap/issues/25195\n\n@mixin hover() {\n &:hover { @content; }\n}\n\n@mixin hover-focus() {\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin plain-hover-focus() {\n &,\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin hover-focus-active() {\n &:hover,\n &:focus,\n &:active {\n @content;\n }\n}\n","// Image Mixins\n// - Responsive image\n// - Retina image\n\n\n// Responsive image\n//\n// Keep images from scaling beyond the width of their parents.\n\n@mixin img-fluid() {\n // Part 1: Set a maximum relative to the parent\n max-width: 100%;\n // Part 2: Override the height to auto, otherwise images will be stretched\n // when setting a width and height attribute on the img element.\n height: auto;\n}\n\n\n// Retina image\n//\n// Short retina mixin for setting background-image and -size.\n\n@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {\n background-image: url($file-1x);\n\n // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,\n // but doesn't convert dppx=>dpi.\n // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.\n // Compatibility info: https://caniuse.com/#feat=css-media-resolution\n @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx\n only screen and (min-resolution: 2dppx) { // Standardized\n background-image: url($file-2x);\n background-size: $width-1x $height-1x;\n }\n @include deprecate(\"`img-retina()`\", \"v4.3.0\", \"v5\");\n}\n","@mixin badge-variant($bg) {\n color: color-yiq($bg);\n background-color: $bg;\n\n @at-root a#{&} {\n @include hover-focus() {\n color: color-yiq($bg);\n background-color: darken($bg, 10%);\n }\n\n &:focus,\n &.focus {\n outline: 0;\n box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);\n }\n }\n}\n","// Resize anything\n\n@mixin resizable($direction) {\n overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`\n resize: $direction; // Options: horizontal, vertical, both\n}\n","// Only display content to screen readers\n//\n// See: https://a11yproject.com/posts/how-to-hide-content/\n// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/\n\n@mixin sr-only() {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n// Use in conjunction with .sr-only to only display content when it's focused.\n//\n// Useful for \"Skip to main content\" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1\n//\n// Credit: HTML5 Boilerplate\n\n@mixin sr-only-focusable() {\n &:active,\n &:focus {\n position: static;\n width: auto;\n height: auto;\n overflow: visible;\n clip: auto;\n white-space: normal;\n }\n}\n","// Sizing shortcuts\n\n@mixin size($width, $height: $width) {\n width: $width;\n height: $height;\n @include deprecate(\"`size()`\", \"v4.3.0\", \"v5\");\n}\n","@mixin reset-text() {\n font-family: $font-family-base;\n // We deliberately do NOT reset font-size or word-wrap.\n font-style: normal;\n font-weight: $font-weight-normal;\n line-height: $line-height-base;\n text-align: left; // Fallback for where `start` is not supported\n text-align: start;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-break: normal;\n word-spacing: normal;\n white-space: normal;\n line-break: auto;\n}\n","// stylelint-disable declaration-no-important\n\n// Typography\n\n@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {\n #{$parent} {\n color: $color !important;\n }\n @if $emphasized-link-hover-darken-percentage != 0 {\n a#{$parent} {\n @include hover-focus() {\n color: darken($color, $emphasized-link-hover-darken-percentage) !important;\n }\n }\n }\n @include deprecate(\"`text-emphasis-variant()`\", \"v4.4.0\", \"v5\", $ignore-warning);\n}\n","// CSS image replacement\n@mixin text-hide($ignore-warning: false) {\n // stylelint-disable-next-line font-family-no-missing-generic-family-keyword\n font: 0/0 a;\n color: transparent;\n text-shadow: none;\n background-color: transparent;\n border: 0;\n\n @include deprecate(\"`text-hide()`\", \"v4.1.0\", \"v5\", $ignore-warning);\n}\n","// Text truncate\n// Requires inline-block or block for proper styling\n\n@mixin text-truncate() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n","// stylelint-disable declaration-no-important\n\n// Visibility\n\n@mixin invisible($visibility) {\n visibility: $visibility !important;\n @include deprecate(\"`invisible()`\", \"v4.3.0\", \"v5\");\n}\n","@mixin alert-variant($background, $border, $color) {\n color: $color;\n @include gradient-bg($background);\n border-color: $border;\n\n hr {\n border-top-color: darken($border, 5%);\n }\n\n .alert-link {\n color: darken($color, 10%);\n }\n}\n","// Button variants\n//\n// Easily pump out default styles, as well as :hover, :focus, :active,\n// and disabled options for all buttons\n\n@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {\n color: color-yiq($background);\n @include gradient-bg($background);\n border-color: $border;\n @include box-shadow($btn-box-shadow);\n\n @include hover() {\n color: color-yiq($hover-background);\n @include gradient-bg($hover-background);\n border-color: $hover-border;\n }\n\n &:focus,\n &.focus {\n color: color-yiq($hover-background);\n @include gradient-bg($hover-background);\n border-color: $hover-border;\n @if $enable-shadows {\n @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n }\n }\n\n // Disabled comes first so active can properly restyle\n &.disabled,\n &:disabled {\n color: color-yiq($background);\n background-color: $background;\n border-color: $border;\n // Remove CSS gradients if they're enabled\n @if $enable-gradients {\n background-image: none;\n }\n }\n\n &:not(:disabled):not(.disabled):active,\n &:not(:disabled):not(.disabled).active,\n .show > &.dropdown-toggle {\n color: color-yiq($active-background);\n background-color: $active-background;\n @if $enable-gradients {\n background-image: none; // Remove the gradient for the pressed/active state\n }\n border-color: $active-border;\n\n &:focus {\n @if $enable-shadows and $btn-active-box-shadow != none {\n @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n }\n }\n }\n}\n\n@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {\n color: $color;\n border-color: $color;\n\n @include hover() {\n color: $color-hover;\n background-color: $active-background;\n border-color: $active-border;\n }\n\n &:focus,\n &.focus {\n box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n\n &.disabled,\n &:disabled {\n color: $color;\n background-color: transparent;\n }\n\n &:not(:disabled):not(.disabled):active,\n &:not(:disabled):not(.disabled).active,\n .show > &.dropdown-toggle {\n color: color-yiq($active-background);\n background-color: $active-background;\n border-color: $active-border;\n\n &:focus {\n @if $enable-shadows and $btn-active-box-shadow != none {\n @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n }\n }\n}\n\n// Button sizes\n@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {\n padding: $padding-y $padding-x;\n @include font-size($font-size);\n line-height: $line-height;\n // Manually declare to provide an override to the browser default\n @include border-radius($border-radius, 0);\n}\n","@mixin caret-down() {\n border-top: $caret-width solid;\n border-right: $caret-width solid transparent;\n border-bottom: 0;\n border-left: $caret-width solid transparent;\n}\n\n@mixin caret-up() {\n border-top: 0;\n border-right: $caret-width solid transparent;\n border-bottom: $caret-width solid;\n border-left: $caret-width solid transparent;\n}\n\n@mixin caret-right() {\n border-top: $caret-width solid transparent;\n border-right: 0;\n border-bottom: $caret-width solid transparent;\n border-left: $caret-width solid;\n}\n\n@mixin caret-left() {\n border-top: $caret-width solid transparent;\n border-right: $caret-width solid;\n border-bottom: $caret-width solid transparent;\n}\n\n@mixin caret($direction: down) {\n @if $enable-caret {\n &::after {\n display: inline-block;\n margin-left: $caret-spacing;\n vertical-align: $caret-vertical-align;\n content: \"\";\n @if $direction == down {\n @include caret-down();\n } @else if $direction == up {\n @include caret-up();\n } @else if $direction == right {\n @include caret-right();\n }\n }\n\n @if $direction == left {\n &::after {\n display: none;\n }\n\n &::before {\n display: inline-block;\n margin-right: $caret-spacing;\n vertical-align: $caret-vertical-align;\n content: \"\";\n @include caret-left();\n }\n }\n\n &:empty::after {\n margin-left: 0;\n }\n }\n}\n","// Pagination\n\n@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {\n .page-link {\n padding: $padding-y $padding-x;\n @include font-size($font-size);\n line-height: $line-height;\n }\n\n .page-item {\n &:first-child {\n .page-link {\n @include border-left-radius($border-radius);\n }\n }\n &:last-child {\n .page-link {\n @include border-right-radius($border-radius);\n }\n }\n }\n}\n","// Lists\n\n// Unstyled keeps list items block level, just removes default browser padding and list-style\n@mixin list-unstyled() {\n padding-left: 0;\n list-style: none;\n}\n","// List Groups\n\n@mixin list-group-item-variant($state, $background, $color) {\n .list-group-item-#{$state} {\n color: $color;\n background-color: $background;\n\n &.list-group-item-action {\n @include hover-focus() {\n color: $color;\n background-color: darken($background, 5%);\n }\n\n &.active {\n color: $white;\n background-color: $color;\n border-color: $color;\n }\n }\n }\n}\n","// Horizontal dividers\n//\n// Dividers (basically an hr) within dropdowns and nav lists\n\n@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {\n height: 0;\n margin: $margin-y 0;\n overflow: hidden;\n border-top: 1px solid $color;\n @include deprecate(\"The `nav-divider()` mixin\", \"v4.4.0\", \"v5\", $ignore-warning);\n}\n","// Form control focus state\n//\n// Generate a customized focus state and for any input with the specified color,\n// which defaults to the `$input-focus-border-color` variable.\n//\n// We highly encourage you to not customize the default value, but instead use\n// this to tweak colors on an as-needed basis. This aesthetic change is based on\n// WebKit's default styles, but applicable to a wider range of browsers. Its\n// usability and accessibility should be taken into account with any change.\n//\n// Example usage: change the default blue border and shadow to white for better\n// contrast against a dark gray background.\n@mixin form-control-focus($ignore-warning: false) {\n &:focus {\n color: $input-focus-color;\n background-color: $input-focus-bg;\n border-color: $input-focus-border-color;\n outline: 0;\n @if $enable-shadows {\n @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: $input-focus-box-shadow;\n }\n }\n @include deprecate(\"The `form-control-focus()` mixin\", \"v4.4.0\", \"v5\", $ignore-warning);\n}\n\n// This mixin uses an `if()` technique to be compatible with Dart Sass\n// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details\n@mixin form-validation-state-selector($state) {\n @if ($state == \"valid\" or $state == \"invalid\") {\n .was-validated #{if(&, \"&\", \"\")}:#{$state},\n #{if(&, \"&\", \"\")}.is-#{$state} {\n @content;\n }\n } @else {\n #{if(&, \"&\", \"\")}.is-#{$state} {\n @content;\n }\n }\n}\n\n@mixin form-validation-state($state, $color, $icon) {\n .#{$state}-feedback {\n display: none;\n width: 100%;\n margin-top: $form-feedback-margin-top;\n @include font-size($form-feedback-font-size);\n color: $color;\n }\n\n .#{$state}-tooltip {\n position: absolute;\n top: 100%;\n z-index: 5;\n display: none;\n max-width: 100%; // Contain to parent when possible\n padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;\n margin-top: .1rem;\n @include font-size($form-feedback-tooltip-font-size);\n line-height: $form-feedback-tooltip-line-height;\n color: color-yiq($color);\n background-color: rgba($color, $form-feedback-tooltip-opacity);\n @include border-radius($form-feedback-tooltip-border-radius);\n }\n\n @include form-validation-state-selector($state) {\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n\n .form-control {\n @include form-validation-state-selector($state) {\n border-color: $color;\n\n @if $enable-validation-icons {\n padding-right: $input-height-inner;\n background-image: escape-svg($icon);\n background-repeat: no-repeat;\n background-position: right $input-height-inner-quarter center;\n background-size: $input-height-inner-half $input-height-inner-half;\n }\n\n &:focus {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n }\n }\n\n // stylelint-disable-next-line selector-no-qualifying-type\n textarea.form-control {\n @include form-validation-state-selector($state) {\n @if $enable-validation-icons {\n padding-right: $input-height-inner;\n background-position: top $input-height-inner-quarter right $input-height-inner-quarter;\n }\n }\n }\n\n .custom-select {\n @include form-validation-state-selector($state) {\n border-color: $color;\n\n @if $enable-validation-icons {\n padding-right: $custom-select-feedback-icon-padding-right;\n background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;\n }\n\n &:focus {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n }\n }\n\n .form-check-input {\n @include form-validation-state-selector($state) {\n ~ .form-check-label {\n color: $color;\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n .custom-control-input {\n @include form-validation-state-selector($state) {\n ~ .custom-control-label {\n color: $color;\n\n &::before {\n border-color: $color;\n }\n }\n\n &:checked {\n ~ .custom-control-label::before {\n border-color: lighten($color, 10%);\n @include gradient-bg(lighten($color, 10%));\n }\n }\n\n &:focus {\n ~ .custom-control-label::before {\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n\n &:not(:checked) ~ .custom-control-label::before {\n border-color: $color;\n }\n }\n }\n }\n\n // custom file\n .custom-file-input {\n @include form-validation-state-selector($state) {\n ~ .custom-file-label {\n border-color: $color;\n }\n\n &:focus {\n ~ .custom-file-label {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n }\n }\n }\n}\n","// Tables\n\n@mixin table-row-variant($state, $background, $border: null) {\n // Exact selectors below required to override `.table-striped` and prevent\n // inheritance to nested tables.\n .table-#{$state} {\n &,\n > th,\n > td {\n background-color: $background;\n }\n\n @if $border != null {\n th,\n td,\n thead th,\n tbody + tbody {\n border-color: $border;\n }\n }\n }\n\n // Hover states for `.table-hover`\n // Note: this is not available for cells or rows within `thead` or `tfoot`.\n .table-hover {\n $hover-background: darken($background, 5%);\n\n .table-#{$state} {\n @include hover() {\n background-color: $hover-background;\n\n > td,\n > th {\n background-color: $hover-background;\n }\n }\n }\n }\n}\n","// stylelint-disable declaration-no-important\n\n// Contextual backgrounds\n\n@mixin bg-variant($parent, $color, $ignore-warning: false) {\n #{$parent} {\n background-color: $color !important;\n }\n a#{$parent},\n button#{$parent} {\n @include hover-focus() {\n background-color: darken($color, 10%) !important;\n }\n }\n @include deprecate(\"The `bg-variant` mixin\", \"v4.4.0\", \"v5\", $ignore-warning);\n}\n\n@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {\n #{$parent} {\n background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;\n }\n @include deprecate(\"The `bg-gradient-variant` mixin\", \"v4.5.0\", \"v5\", $ignore-warning);\n}\n","// stylelint-disable property-blacklist\n// Single side border-radius\n\n// Helper function to replace negative values with 0\n@function valid-radius($radius) {\n $return: ();\n @each $value in $radius {\n @if type-of($value) == number {\n $return: append($return, max($value, 0));\n } @else {\n $return: append($return, $value);\n }\n }\n @return $return;\n}\n\n@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {\n @if $enable-rounded {\n border-radius: valid-radius($radius);\n }\n @else if $fallback-border-radius != false {\n border-radius: $fallback-border-radius;\n }\n}\n\n@mixin border-top-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: valid-radius($radius);\n border-top-right-radius: valid-radius($radius);\n }\n}\n\n@mixin border-right-radius($radius) {\n @if $enable-rounded {\n border-top-right-radius: valid-radius($radius);\n border-bottom-right-radius: valid-radius($radius);\n }\n}\n\n@mixin border-bottom-radius($radius) {\n @if $enable-rounded {\n border-bottom-right-radius: valid-radius($radius);\n border-bottom-left-radius: valid-radius($radius);\n }\n}\n\n@mixin border-left-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: valid-radius($radius);\n border-bottom-left-radius: valid-radius($radius);\n }\n}\n\n@mixin border-top-left-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: valid-radius($radius);\n }\n}\n\n@mixin border-top-right-radius($radius) {\n @if $enable-rounded {\n border-top-right-radius: valid-radius($radius);\n }\n}\n\n@mixin border-bottom-right-radius($radius) {\n @if $enable-rounded {\n border-bottom-right-radius: valid-radius($radius);\n }\n}\n\n@mixin border-bottom-left-radius($radius) {\n @if $enable-rounded {\n border-bottom-left-radius: valid-radius($radius);\n }\n}\n","@mixin box-shadow($shadow...) {\n @if $enable-shadows {\n $result: ();\n\n @if (length($shadow) == 1) {\n // We can pass `@include box-shadow(none);`\n $result: $shadow;\n } @else {\n // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`\n @for $i from 1 through length($shadow) {\n @if nth($shadow, $i) != \"none\" {\n $result: append($result, nth($shadow, $i), \"comma\");\n }\n }\n }\n @if (length($result) > 0) {\n box-shadow: $result;\n }\n }\n}\n","// Gradients\n\n@mixin gradient-bg($color) {\n @if $enable-gradients {\n background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;\n } @else {\n background-color: $color;\n }\n}\n\n// Horizontal gradient, from left to right\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);\n background-repeat: repeat-x;\n}\n\n// Vertical gradient, from top to bottom\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);\n background-repeat: repeat-x;\n}\n\n@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {\n background-image: linear-gradient($deg, $start-color, $end-color);\n background-repeat: repeat-x;\n}\n@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {\n background-image: radial-gradient(circle, $inner-color, $outer-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {\n background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);\n}\n","// stylelint-disable property-blacklist\n@mixin transition($transition...) {\n @if length($transition) == 0 {\n $transition: $transition-base;\n }\n\n @if length($transition) > 1 {\n @each $value in $transition {\n @if $value == null or $value == none {\n @warn \"The keyword 'none' or 'null' must be used as a single argument.\";\n }\n }\n }\n\n @if $enable-transitions {\n @if nth($transition, 1) != null {\n transition: $transition;\n }\n\n @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n }\n}\n","@mixin clearfix() {\n &::after {\n display: block;\n clear: both;\n content: \"\";\n }\n}\n","// Framework grid generation\n//\n// Used only by Bootstrap to generate the correct number of grid classes given\n// any value of `$grid-columns`.\n\n@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {\n // Common properties for all breakpoints\n %grid-column {\n position: relative;\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n }\n\n @each $breakpoint in map-keys($breakpoints) {\n $infix: breakpoint-infix($breakpoint, $breakpoints);\n\n @if $columns > 0 {\n // Allow columns to stretch full width below their breakpoints\n @for $i from 1 through $columns {\n .col#{$infix}-#{$i} {\n @extend %grid-column;\n }\n }\n }\n\n .col#{$infix},\n .col#{$infix}-auto {\n @extend %grid-column;\n }\n\n @include media-breakpoint-up($breakpoint, $breakpoints) {\n // Provide basic `.col-{bp}` classes for equal-width flexbox columns\n .col#{$infix} {\n flex-basis: 0;\n flex-grow: 1;\n min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410\n max-width: 100%;\n }\n\n @if $grid-row-columns > 0 {\n @for $i from 1 through $grid-row-columns {\n .row-cols#{$infix}-#{$i} {\n @include row-cols($i);\n }\n }\n }\n\n .col#{$infix}-auto {\n @include make-col-auto();\n }\n\n @if $columns > 0 {\n @for $i from 1 through $columns {\n .col#{$infix}-#{$i} {\n @include make-col($i, $columns);\n }\n }\n }\n\n .order#{$infix}-first { order: -1; }\n\n .order#{$infix}-last { order: $columns + 1; }\n\n @for $i from 0 through $columns {\n .order#{$infix}-#{$i} { order: $i; }\n }\n\n @if $columns > 0 {\n // `$columns - 1` because offsetting by the width of an entire row isn't possible\n @for $i from 0 through ($columns - 1) {\n @if not ($infix == \"\" and $i == 0) { // Avoid emitting useless .offset-0\n .offset#{$infix}-#{$i} {\n @include make-col-offset($i, $columns);\n }\n }\n }\n }\n }\n }\n}\n","/// Grid system\n//\n// Generate semantic grid columns with these mixins.\n\n@mixin make-container($gutter: $grid-gutter-width) {\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n margin-right: auto;\n margin-left: auto;\n}\n\n\n// For each breakpoint, define the maximum width of the container in a media query\n@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {\n @each $breakpoint, $container-max-width in $max-widths {\n @include media-breakpoint-up($breakpoint, $breakpoints) {\n max-width: $container-max-width;\n }\n }\n}\n\n@mixin make-row($gutter: $grid-gutter-width) {\n display: flex;\n flex-wrap: wrap;\n margin-right: -$gutter / 2;\n margin-left: -$gutter / 2;\n}\n\n@mixin make-col-ready($gutter: $grid-gutter-width) {\n position: relative;\n // Prevent columns from becoming too narrow when at smaller grid tiers by\n // always setting `width: 100%;`. This works because we use `flex` values\n // later on to override this initial width.\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n}\n\n@mixin make-col($size, $columns: $grid-columns) {\n flex: 0 0 percentage($size / $columns);\n // Add a `max-width` to ensure content within each column does not blow out\n // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari\n // do not appear to require this.\n max-width: percentage($size / $columns);\n}\n\n@mixin make-col-auto() {\n flex: 0 0 auto;\n width: auto;\n max-width: 100%; // Reset earlier grid tiers\n}\n\n@mixin make-col-offset($size, $columns: $grid-columns) {\n $num: $size / $columns;\n margin-left: if($num == 0, 0, percentage($num));\n}\n\n// Row columns\n//\n// Specify on a parent element(e.g., .row) to force immediate children into NN\n// numberof columns. Supports wrapping to new lines, but does not do a Masonry\n// style grid.\n@mixin row-cols($count) {\n & > * {\n flex: 0 0 100% / $count;\n max-width: 100% / $count;\n }\n}\n","// stylelint-disable declaration-no-important\n\n@mixin float-left() {\n float: left !important;\n @include deprecate(\"The `float-left` mixin\", \"v4.3.0\", \"v5\");\n}\n@mixin float-right() {\n float: right !important;\n @include deprecate(\"The `float-right` mixin\", \"v4.3.0\", \"v5\");\n}\n@mixin float-none() {\n float: none !important;\n @include deprecate(\"The `float-none` mixin\", \"v4.3.0\", \"v5\");\n}\n","//\r\n// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.\r\n// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss\r\n// are not accessible in this file but you can override any global variable as shown below:\r\n//\r\n\r\n// Theme colors\r\n// Override primary color variants\r\n$primary: \t\t\t\t\t\t\t\t\t#3699FF;\r\n$primary-hover: \t\t\t\t\t\t\t\t\t#187DE4;\r\n$primary-light: \t\t\t\t\t\t\t\t\t#E1F0FF;\r\n$primary-inverse: \t\t\t\t\t\t\t\t\t#FFFFFF;\r\n","//\r\n// Global variables for Bootstrap customization.\r\n// To override any Bootstrap variable safely you can use _variables.demo.scss\r\n//\r\n\r\n//\r\n// Color system\r\n//\r\n\r\n// Black color\r\n$black: \t\t\t\t\t\t\t\t\t\t\t#000000 !default;\r\n\r\n// White color\r\n$white: \t\t\t\t\t\t\t\t\t\t\t#ffffff !default;\r\n\r\n// Gray colors\r\n$gray-100: \t\t\t\t\t\t\t\t\t\t\t#F3F6F9 !default;\r\n$gray-200: \t\t\t\t\t\t\t\t\t\t\t#ECF0F3 !default;\r\n$gray-300: \t\t\t\t\t\t\t\t\t\t\t#E5EAEE !default;\r\n$gray-400: \t\t\t\t\t\t\t\t\t\t\t#D6D6E0 !default;\r\n$gray-500: \t\t\t\t\t\t\t\t\t\t\t#B5B5C3 !default;\r\n$gray-600: \t\t\t\t\t\t\t\t\t\t\t#80808F !default;\r\n$gray-700: \t\t\t\t\t\t\t\t\t\t\t#464E5F !default;\r\n$gray-800: \t\t\t\t\t\t\t\t\t\t\t#1B283F !default;\r\n$gray-900: \t\t\t\t\t\t\t\t\t\t\t#212121 !default;\r\n\r\n// Dark colors\r\n$dark: \t\t\t\t\t\t\t\t\t$gray-900 !default;\r\n$dark-75: \t\t\t\t\t\t\t\t\t$gray-700 !default; // Custom variable\r\n$dark-50: \t\t\t\t\t\t\t\t\t$gray-600 !default; // Custom variable\r\n$dark-25: \t\t\t\t\t\t\t\t\t$gray-400 !default; // Custom variable\r\n\r\n// Text muted\r\n$text-muted: \t\t\t\t\t\t$gray-500 !default; // Custom variable\r\n\r\n// Gray colors list\r\n$grays: (\r\n \"100\": $gray-100,\r\n \"200\": $gray-200,\r\n \"300\": $gray-300,\r\n \"400\": $gray-400,\r\n \"500\": $gray-500,\r\n \"600\": $gray-600,\r\n\t\"700\": $gray-700,\r\n \"800\": $gray-800,\r\n \"900\": $gray-900\r\n) !default; // Custom variable\r\n\r\n// Bootstrap standard & extended colors\r\n// Dark colors\r\n$dark: \t\t\t\t\t\t\t\t\t$dark !default;\r\n$dark-hover: \t\t\t\t\t\t\t\t#111111 !default; // Custom variable\r\n$dark-light: \t\t\t\t\t\t\t $gray-400 !default; // Custom variable\r\n$dark-inverse: \t\t\t\t\t\t\t\t$white !default; // Custom variable\r\n\r\n// Primary colors\r\n$primary: \t\t\t\t\t\t\t\t\t#3699FF !default;\r\n$primary-hover: \t\t\t\t\t\t\t\t\t#187DE4 !default; // Custom variable\r\n$primary-light: \t\t\t\t\t\t\t\t\t#E1F0FF !default; // Custom variable\r\n$primary-inverse: \t\t\t\t\t\t\t\t\t$white !default; // Custom variable\r\n\r\n// Secondary colors\r\n$secondary: \t\t\t\t\t\t\t\t\t$gray-300 !default;\r\n$secondary-hover: \t\t\t\t\t\t\t\t\tdarken($gray-300, 4%) !default; // Custom variable\r\n$secondary-light: \t\t\t\t\t\t\t\t\t$gray-200 !default; // Custom variable\r\n$secondary-inverse:\t\t\t\t\t\t\t\t\t$dark-75 !default; // Custom variable\r\n\r\n// Success colors\r\n$success: \t\t\t\t\t\t\t\t\t#1BC5BD !default;\r\n$success-hover: \t\t\t\t\t\t\t\t\t#0BB7AF !default; // Custom variable\r\n$success-light: \t\t\t\t\t\t\t\t\t#C9F7F5 !default; // Custom variable\r\n$success-inverse: \t\t\t\t\t\t\t\t\t$white !default; // Custom variable\r\n\r\n// Inco colors\r\n$info: \t\t \t\t\t\t\t\t\t\t#8950FC !default;\r\n$info-hover: \t\t \t\t\t\t\t\t\t\t#7337EE !default; // Custom variable\r\n$info-light: \t\t \t\t\t\t\t\t\t\t#EEE5FF !default; // Custom variable\r\n$info-inverse: \t\t \t\t\t\t\t\t\t\t$white !default; // Custom variable\r\n\r\n// Warning colors\r\n$warning: \t\t\t\t\t\t\t\t\t#FFA800 !default;\r\n$warning-hover: \t\t\t\t\t\t\t\t\t#EE9D01 !default; // Custom variable\r\n$warning-light: \t\t\t\t\t\t\t\t\t#FFF4DE !default; // Custom variable\r\n$warning-inverse: \t\t\t\t\t\t\t\t\t$white !default; // Custom variable\r\n\r\n// Danger colors\r\n$danger: \t\t\t\t\t\t\t\t\t#F64E60 !default;\r\n$danger-hover: \t\t\t\t\t\t\t\t\t#EE2D41 !default; // Custom variable\r\n$danger-light: \t\t\t\t\t\t\t\t\t#FFE2E5 !default; // Custom variable\r\n$danger-inverse: \t\t\t\t\t\t\t\t\t$white !default; // Custom variable\r\n\r\n// Light colors\r\n$light: \t\t\t\t\t\t\t\t\t$gray-100 !default;\r\n$light-hover: \t\t\t\t\t\t\t\t$gray-300 !default; // Custom variable\r\n$light-light: \t\t\t\t\t\t\t\t$gray-100 !default; // Custom variable\r\n$light-inverse: \t\t\t\t\t\t\t\t$gray-600 !default; // Custom variable\r\n\r\n// White colors\r\n$white: \t\t\t\t\t\t\t\t\t\t\t$white !default;\r\n$white-hover: \t\t\t\t\t\t\t\t\t$gray-100 !default; // Custom variable\r\n$white-light: \t\t\t\t\t\t\t\t\t$white !default; // Custom variable\r\n$white-inverse: \t\t\t\t\t\t\t\t\t$dark-75 !default; // Custom variable\r\n\r\n// Bootstrap theme colors\r\n$theme-colors: (\r\n\t\"white\": $white, // custom color type\r\n\t\"primary\": $primary,\r\n \"secondary\": $secondary,\r\n \"success\": $success,\r\n \"info\": $info,\r\n \"warning\": $warning,\r\n \"danger\": $danger,\r\n \"light\": $light,\r\n \"dark\": $dark\r\n) !default;\r\n\r\n// Extended hover colors for Bootstrap theme colors\r\n$theme-hover-colors: (\r\n\t\"white\": $white-hover, // custom color type\r\n\t\"primary\": $primary-hover,\r\n \"secondary\": $secondary-hover,\r\n \"success\": $success-hover,\r\n \"info\": $info-hover,\r\n \"warning\": $warning-hover,\r\n \"danger\": $danger-hover,\r\n \"light\": $light-hover,\r\n \"dark\": $dark-hover\r\n) !default; // Custom variable\r\n\r\n// Extended inverse colors for Bootstrap theme colors\r\n$theme-inverse-colors: (\r\n\t\"white\": $white-inverse,\r\n\t\"primary\": $primary-inverse,\r\n \"secondary\": $secondary-inverse,\r\n \"success\": $success-inverse,\r\n \"info\": $info-inverse,\r\n \"warning\": $warning-inverse,\r\n \"danger\": $danger-inverse,\r\n \"light\": $light-inverse,\r\n \"dark\": $dark-inverse\r\n) !default; // Custom variable\r\n\r\n// Extended outline colors for Bootstrap theme colors\r\n$theme-outline-inverse-colors: (\r\n\t\"white\": $white,\r\n\t\"primary\": $primary,\r\n \"secondary\": $dark-75,\r\n \"success\": $success,\r\n \"info\": $info,\r\n \"warning\": $warning,\r\n \"danger\": $danger,\r\n \"light\": $dark-75,\r\n \"dark\": $dark\r\n) !default; // Custom variable\r\n\r\n// Extended light colors for Bootstrap theme colors\r\n$theme-light-colors: (\r\n \"white\": $white-light,\r\n\t\"primary\": $primary-light,\r\n \"secondary\": $secondary-light,\r\n \"success\": $success-light,\r\n \"info\": $info-light,\r\n \"warning\": $warning-light,\r\n \"danger\": $danger-light,\r\n \"light\": $light-light,\r\n \"dark\": $dark-light\r\n) !default; // Custom variable\r\n\r\n// Extended shadow colors for Bootstrap theme colors\r\n$theme-shadow-colors: (\r\n \"white\": $dark,\r\n\t\"primary\": $primary,\r\n \"secondary\": $dark,\r\n \"success\": $success,\r\n \"info\": $info,\r\n \"warning\": $warning,\r\n \"danger\": $danger,\r\n \"light\": $dark,\r\n \"dark\": $dark\r\n) !default; // Custom variable\r\n\r\n// Extended theme text colors\r\n$theme-text-colors: (\r\n \"white\": $white,\r\n\t\"primary\": $primary,\r\n \"secondary\": $dark,\r\n \"success\": $success,\r\n \"info\": $info,\r\n \"warning\": $warning,\r\n \"danger\": $danger,\r\n \"light\": light,\r\n \"dark\": $dark,\r\n \"dark-75\": $dark-75,\r\n \"dark-50\": $dark-50,\r\n \"dark-25\": $dark-25,\r\n \"muted\": $text-muted\r\n) !default; // Custom variable\r\n\r\n// Social Network Colors Used With Boostrap Buttons(see: https://primarycolors.net/)\r\n$social-colors: (\r\n\tfacebook: (\r\n\t\tbase: #3b5998,\r\n\t\tinverse: #ffffff,\r\n light: rgba(#3b5998, 0.1),\r\n hover: darken(#3b5998, 7.5%)\r\n\t),\r\n\tgoogle: (\r\n\t\tbase: #dd4b39,\r\n\t\tinverse: #ffffff,\r\n light: rgba(#dd4b39, 0.1),\r\n hover: darken(#dd4b39, 7.5%)\r\n\t),\r\n\ttwitter: (\r\n\t\tbase: #1da1f2,\r\n\t\tinverse: #ffffff,\r\n light: rgba(#1da1f2, 0.1),\r\n hover: darken(#1da1f2, 7.5%)\r\n\t),\r\n\tinstagram: (\r\n\t\tbase: #e1306c,\r\n\t\tinverse: #ffffff,\r\n light: rgba(#e1306c, 0.1),\r\n hover: darken(#e1306c, 7.5%)\r\n\t),\r\n\tyoutube: (\r\n\t\tbase: #ff0000,\r\n\t\tinverse: #ffffff,\r\n light: rgba(#ff0000, 0.1),\r\n hover: darken(#ff0000, 7.5%)\r\n\t),\r\n linkedin: (\r\n base: #0077b5,\r\n inverse: #ffffff,\r\n light: rgba(#0077b5, 0.1),\r\n hover: darken(#0077b5, 7.5%)\r\n ),\r\n skype: (\r\n base: #00aff0,\r\n inverse: #ffffff,\r\n light: rgba(#00aff0, 0.1),\r\n hover: darken(#00aff0, 7.5%)\r\n )\r\n) !default; // Custom variable\r\n\r\n// Extended custom spacing for Bootstrap\r\n//\r\n// Control the default styling of most Bootstrap elements by modifying these\r\n// variables. Mostly focused on spacing.\r\n// You can add more entries to the $spacers map, should you need more variation.\r\n$spacer: 1rem !default;\r\n// stylelint-disable-next-line scss/dollar-variable-default\r\n$spacers: (\r\n 0: 0,\r\n 1: ($spacer * .25), \t// 3.5px\r\n 2: ($spacer * .5), \t// 7px;\r\n\t3: ($spacer * .75), \t// 10.5px\r\n\t4: ($spacer * 1), \t// 14px\r\n\t5: ($spacer * 1.25), \t// 17.5px\r\n\t6: ($spacer * 1.5), \t// 21px\r\n\t7: ($spacer * 1.75), \t// 24.5px\r\n\t8: ($spacer * 2), \t// 28px\r\n\t9: ($spacer * 2.25), \t// 31.5px\r\n\t10: ($spacer * 2.5), \t// 35px\r\n\t11: ($spacer * 2.75),\t// 38.5px\r\n\t12: ($spacer * 3), \t// 42px\r\n\t13: ($spacer * 3.25),\t// 45.5px\r\n\t14: ($spacer * 3.5), \t// 49px\r\n\t15: ($spacer * 3.75), \t// 52.5px\r\n\t16: ($spacer * 4), \t\t// 55px\r\n\t17: ($spacer * 4.25), \t// 58.5px\r\n\t18: ($spacer * 4.5), \t// 62px\r\n\t19: ($spacer * 4.75), \t// 65.5px\r\n\t20: ($spacer * 5), \t\t// 69px\r\n\t21: ($spacer * 5.25),\t// 73.5px\r\n\t22: ($spacer * 5.5), \t// 77px\r\n\t23: ($spacer * 5.75), \t// 80.5px\r\n\t24: ($spacer * 6), \t\t// 84px\r\n\t25: ($spacer * 6.25), \t// 87.5px\r\n\t26: ($spacer * 6.5), \t// 91px\r\n\t27: ($spacer * 6.75), \t// 94.5px\r\n\t38: ($spacer * 7), \t\t// 99px\r\n\t29: ($spacer * 7.25), // 102.5px\r\n\t30: ($spacer * 7.5), \t// 106px\r\n\t31: ($spacer * 7.75), \t// 109.5px\r\n\t32: ($spacer * 8), \t\t// 113px\r\n\t33: ($spacer * 8.25), \t// 116.5px\r\n\t34: ($spacer * 8.5), \t// 120px\r\n\t35: ($spacer * 8.75), \t// 123.5px\r\n\t36: ($spacer * 9), \t\t// 127px\r\n\t37: ($spacer * 9.25), // 130.5px\r\n\t48: ($spacer * 9.5), \t// 134px\r\n\t39: ($spacer * 9.75), \t// 137.5px\r\n 40: ($spacer * 10), \t// 140px\r\n);\r\n\r\n// Components\r\n//\r\n// Define common padding and border radius sizes and more.\r\n$line-height-xl:\t\t\t\t\t\t\t\t\t1.8 !default;\r\n$line-height-lg: \t\t\t\t\t\t1.5 !default;\r\n$line-height-sm: \t\t\t\t\t\t1.35 !default;\r\n\r\n$component-light-style-opacity: \t0.1 !default; // Custom variable\r\n$component-active-color: $white !default;\r\n$component-active-bg: $primary !default;\r\n\r\n// Box shadow\r\n$box-shadow-xs: 0 0.25rem 0.5rem 0 rgba($black, 0.05);\r\n$box-shadow-sm: \t\t\t\t\t\t0 .1rem 1rem 0.25rem rgba($black, .05) !default;\r\n$box-shadow: \t\t\t\t\t\t0 .5rem 1.5rem 0.5rem rgba($black, .075) !default;\r\n$box-shadow-lg: \t\t\t\t\t\t0 1rem 2rem 1rem rgba($black, .1) !default;\r\n\r\n// Border Radiues\r\n$border-radius-sm: \t\t\t\t\t\t.28rem !default;\r\n$border-radius: \t\t\t\t\t\t.42rem !default;\r\n$border-radius-lg: \t\t\t\t\t\t.85rem !default;\r\n$border-radius-xl: 1.25rem !default; // Custom variable\r\n\r\n// Border settings\r\n$border-color: $gray-200 !default;\r\n$border-width: 1px !default;\r\n\r\n// Hover background color\r\n$hover-bg: $gray-100 !default; // Custom variable\r\n\r\n// Activebackground color\r\n$active-bg: darken($gray-100, 1%) !default; // Custom variable\r\n\r\n// Options\r\n//\r\n// Quickly modify global styling by enabling or disabling optional features.\r\n$enable-rounded: \t\t\t\t\t\t\t\t\ttrue !default;\r\n$enable-shadows: \t\ttrue !default;\r\n\r\n// Grid breakpoints\r\n//\r\n// Define the minimum dimensions at which your layout will change,\r\n// adapting to different screen sizes, for use in media queries.\r\n$grid-breakpoints: (\r\n xs: 0,\r\n sm: 576px,\r\n md: 768px,\r\n lg: 992px,\r\n xl: 1200px,\r\n xxl: 1400px // custom breakpoint\r\n) !default;\r\n\r\n\r\n// Grid containers\r\n//\r\n// Define the maximum width of `.container` for different screen sizes.\r\n$container-max-widths: (\r\n sm: 540px,\r\n md: 720px,\r\n lg: 960px,\r\n xl: 1140px,\r\n xxl: 1340px\r\n) !default;\r\n\r\n\r\n// Grid columns\r\n//\r\n// Set the number of columns and specify the width of the gutters.\r\n$grid-columns: \t\t\t\t\t\t12 !default;\r\n$grid-gutter-width: \t\t\t\t\t\t25px !default;\r\n$grid-divider-bg: $gray-200 !default; // Custom variable\r\n\r\n\r\n// Body\r\n// Settings for the `<body>` element.\r\n$body-bg: \t\t\t\t\t\t$white !default;\r\n$body-color: \t\t\t\t\t\t$dark-75 !default;\r\n\r\n// Typography\r\n//\r\n// Font, line-height, and color for body text, headings, and more.\r\n\r\n// Font family\r\n$font-family-base: \t\t\t\t\t\tPoppins, Helvetica, \"sans-serif\" !default;\r\n\r\n$font-size-base: \t\t\t\t\t\t1rem !default; // Assumes the browser default, typically `13px`\r\n$font-size-lg: \t \t\t\t\t\t$font-size-base * 1.08 !default; // 14.04px\r\n$font-size-sm: \t\t\t\t\t\t$font-size-base * .925 !default; // 12.025px\r\n$font-size-xs: \t\t\t\t\t\t$font-size-base * .8 !default; // 10.4px\r\n\r\n$h1-font-size: $font-size-base * 2 !default; // 26px\r\n$h2-font-size: $font-size-base * 1.75 !default; // 22.75px\r\n$h3-font-size: $font-size-base * 1.5 !default; // 19.5px\r\n$h4-font-size: $font-size-base * 1.35 !default; // 17.55px\r\n$h5-font-size: $font-size-base * 1.25 !default; // 16.25px\r\n$h6-font-size: $font-size-base * 1.175 !default; // 15.275px\r\n\r\n$headings-margin-bottom: $spacer / 2 !default;\r\n$headings-font-family: null !default;\r\n$headings-font-weight: 500 !default;\r\n$headings-line-height: 1.2 !default;\r\n$headings-color: null !default;\r\n\r\n$display1-size: 5.5rem !default; // 71.5px\r\n$display2-size: 4.5rem !default; // 58.5px\r\n$display3-size: 3.5rem !default; // 45.5px\r\n$display4-size: 2.5rem !default; // 32.5px\r\n$display5-size: 2.25rem !default; // 29.5px\r\n\r\n// Font Sizes\r\n$font-sizes: (\r\n font-size-h1: $h1-font-size,\r\n font-size-h2: $h2-font-size,\r\n font-size-h3: $h3-font-size,\r\n font-size-h4: $h4-font-size,\r\n font-size-h5: $h5-font-size,\r\n font-size-h6: $h6-font-size,\r\n display1: $display1-size,\r\n display2: $display2-size,\r\n display3: $display3-size,\r\n display4: $display4-size,\r\n display5: $display5-size\r\n) !default;\r\n\r\n$display1-weight: 300 !default;\r\n$display2-weight: 300 !default;\r\n$display3-weight: 300 !default;\r\n$display4-weight: 300 !default;\r\n$display-line-height: $headings-line-height !default;\r\n\r\n$lead-font-size: $font-size-base * 1.25 !default;\r\n$lead-font-weight: 300 !default;\r\n$small-font-size: 80% !default;\r\n\r\n// Font Weight\r\n$font-weight-lighter: \t\t\t\t\t\tlighter !default;\r\n$font-weight-light: \t\t\t\t\t\t300 !default;\r\n$font-weight-normal: \t\t\t\t\t\t400 !default;\r\n$font-weight-bold: \t\t\t\t\t\t500 !default;\r\n$font-weight-bolder: \t\t\t\t\t\t600 !default;\r\n$font-weight-boldest: \t\t\t\t\t\t700 !default;\r\n\r\n$line-height-base: 1.5 !default;\r\n\r\n\r\n// Transition\r\n$transition: \t\tall 0.15s ease !default; // Custom variable\r\n$transition-link: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !default; // Custom variable\r\n$transition-input: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !default; // Custom variable\r\n\r\n\r\n// Links\r\n//\r\n// Style anchor elements.\r\n$link-color: $primary !default;\r\n$link-decoration: none !default;\r\n$link-hover-color: darken($primary, 15%) !default;\r\n$link-hover-decoration: underline !default;\r\n// Darken percentage for links with `.text-*` class (e.g. `.text-success`)\r\n$emphasized-link-hover-darken-percentage: 15% !default;\r\n\r\n\r\n// Buttons + Forms\r\n//\r\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\r\n$input-btn-padding-y: .65rem !default;\r\n$input-btn-padding-x: 1rem !default;\r\n$input-btn-font-family: null !default;\r\n$input-btn-font-size: $font-size-base !default;\r\n$input-btn-line-height: $line-height-base !default;\r\n\r\n$input-btn-focus-width: .2rem !default;\r\n$input-btn-focus-color: rgba($component-active-bg, .25) !default;\r\n$input-btn-focus-box-shadow: none !default;\r\n\r\n$input-btn-padding-y-sm: .55rem !default;\r\n$input-btn-padding-x-sm: .75rem !default;\r\n$input-btn-font-size-sm: $font-size-sm !default;\r\n$input-btn-line-height-sm: $line-height-sm !default;\r\n\r\n$input-btn-padding-y-lg: 0.825rem !default;\r\n$input-btn-padding-x-lg: 1.42rem !default;\r\n$input-btn-font-size-lg: $font-size-lg !default;\r\n$input-btn-line-height-lg: $line-height-lg !default;\r\n\r\n$input-btn-border-width: $border-width !default;\r\n\r\n\r\n// Buttons\r\n//\r\n// For each of Bootstrap's buttons, define text, background, and border color.\r\n$btn-disabled-opacity: \t\t\t\t\t\t.6 !default;\r\n$btn-transition: \t\t\t\t\t\tcolor .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out !default;// Custom variable\r\n$btn-box-shadow: none !default;\r\n$btn-focus-box-shadow: none !default;\r\n$btn-active-box-shadow: none !default;\r\n$btn-font-weight: \t\t\t\t\t\tnormal !default;\r\n$btn-secondary-color:\t\t\t\t\t\t\t\t$dark-75 !default;\r\n$btn-secondary-hover-bg-color:\t\t\t\t\t\t$gray-100 !default;\r\n$btn-icon-size-xs: 24px !default; //custom parameter\r\n\r\n// Allows for customizing button radius independently from global border radius\r\n$btn-border-radius: $border-radius !default;\r\n$btn-border-radius-lg: $border-radius !default;\r\n$btn-border-radius-sm: $border-radius !default;\r\n\r\n$input-plaintext-color: \t\t\t$dark-75 !default;\r\n$input-placeholder-color: \t\t\t$text-muted !default;\r\n$input-color: \t\t\t$dark-75 !default;\r\n$input-border-color:\t\t\t\t\t\t\t\t$gray-300 !default;\r\n$input-border-width: $input-btn-border-width !default;\r\n$input-box-shadow: none !default;\r\n$input-focus-border-color:\t\t\t\t\t\t\tlighten($primary, 10%);\r\n$input-focus-box-shadow: none !default;\r\n$input-height-border: $input-border-width * 2 !default;\r\n\r\n$input-bg: $white !default;\r\n$input-disabled-bg: \t\t\t$gray-100 !default;\r\n$input-readonly-bg: \t\t\t$white !default; // Custom variable\r\n$input-group-icon-color: \t\t$dark-75 !default;\r\n$input-group-addon-color: \t\t\t$dark-75 !default;\r\n$input-group-addon-bg: \t\t\t$gray-100 !default;\r\n\r\n$input-border-radius: \t\t\t$border-radius !default;\r\n$input-border-radius-lg: \t\t\t$border-radius !default;\r\n$input-border-radius-sm: \t\t\t$border-radius-sm !default;\r\n\r\n$input-solid-bg: $gray-100; // Custom variable\r\n$input-solid-bg-focus: $gray-200; // Custom variable\r\n$input-solid-placeholder-color: $input-placeholder-color; // Custom variable\r\n$input-solid-color: \t$dark-75; // Custom variable\r\n\r\n// Forms\r\n$form-group-margin-bottom: 1.75rem !default;\r\n$form-label-font-size: 1rem !default; // Custom variable\r\n$form-label-font-weight: 400 !default; // Custom variable\r\n$form-feedback-font-size: 0.9rem !default; // Custom variable\r\n$form-feedback-font-weight: 400 !default; // Custom variable\r\n$form-text-font-size: 0.9rem !default; // Custom variable\r\n$form-text-font-weight: 400 !default; // Custom variable\r\n$form-validation-input-shadow: false; // Custom variable\r\n\r\n// Table\r\n$table-bg: \t\t\t\t\ttransparent !default;\r\n$table-accent-bg: \t\t\t\t\t$gray-200 !default;\r\n$table-hover-bg: \t\t\t\t\t$gray-300 !default;\r\n$table-active-bg: \t\t\t\t\t$table-hover-bg !default;\r\n\r\n$table-border-color: \t\t\t\t\t$gray-200 !default;\r\n$table-head-bg: \t\t\t\t\t$gray-100 !default;\r\n$table-head-color: \t\t\t\t\t$dark-75 !default;\r\n$table-head-font-size: \t\t\t\t\t1rem !default; // Custom variable\r\n$table-head-font-weight: \t\t\t\t\t600 !default; // Custom variable\r\n\r\n$table-dark-color: \t\t\t\t\t\t$white !default;\r\n$table-dark-bg: \t\t\t\t\t\t$dark !default;\r\n$table-dark-accent-bg: \t\t\t\t\t\trgba($white, .05) !default;\r\n$table-dark-hover-color: \t\t\t\t\t\t$table-dark-color !default;\r\n$table-dark-hover-bg: \t\t\t\t\t\trgba($white, .075) !default;\r\n$table-dark-border-color: \t\t\t\t\t\tlighten($table-dark-bg, 7.5%) !default;\r\n\r\n$table-head-bg: $gray-100 !default; // Custom variable\r\n$table-compact-head-font-size: 0.9rem !default; // Custom variable\r\n$table-compact-head-color: $text-muted !default; // Custom variable\r\n$table-compact-head-text-transform: uppercase !default; // Custom variable\r\n$table-compact-head-font-weight: 600 !default; // Custom variable\r\n$table-compact-head-font-weight: 600 !default; // Custom variable\r\n$table-compact-head-letter-spacing: 0.1rem !default; // Custom variable\r\n\r\n// Card\r\n$card-box-shadow: \t\t\t\t\t\t\t\t\t0px 0px 30px 0px rgba(82,63,105,0.05) !default; // card custom shadow\r\n$card-border-color: \t\t\t\t$gray-200 !default;\r\n$card-cap-bg: \t\t\t\t$white !default;\r\n$card-spacer-y: \t\t\t\t2rem !default;\r\n$card-spacer-x: \t\t\t\t\t2.25rem !default;\r\n$card-border-radius: \t\t\t\t$border-radius !default;\r\n\r\n$card-header-spacer-y: 0.5rem !default; // Custom variable\r\n$card-header-height: \t\t\t\t\t\t\t\t70px !default; // Custom variable\r\n$card-sticky-header-bg: \t\t\t\t\t\t $white !default; // Custom variable\r\n$card-sticky-header-height: \t\t\t\t\t\t70px !default; // Custom variable\r\n$card-sticky-zindex: 101 !default; // Custom variable\r\n$card-sticky-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1) !default; // Custom variable\r\n\r\n// List group\r\n$list-group-border-color: \t\t\t\t$gray-200 !default;\r\n$list-group-hover-bg: \t\t\t\t$gray-200 !default;\r\n\r\n\r\n// Modals\r\n\r\n// Padding applied to the modal body\r\n$modal-inner-padding: \t\t\t\t\t1.75rem !default;\r\n\r\n// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding\r\n$modal-footer-margin-between: \t\t\t\t.5rem !default;\r\n\r\n$modal-dialog-margin: \t\t\t\t.5rem !default;\r\n$modal-dialog-margin-y-sm-up: \t\t\t\t1.75rem !default;\r\n\r\n$modal-content-color: \t\t\t\tnull !default;\r\n$modal-content-bg: \t\t\t\t$white !default;\r\n$modal-content-border-color: \t\t\t\trgba($black, .2) !default;\r\n$modal-content-border-width: \t\t\t\t0 !default;\r\n$modal-content-border-radius: \t\t\t\t$border-radius !default;\r\n$modal-content-inner-border-radius: \t\t\t\t$border-radius !default;\r\n\r\n$modal-content-box-shadow: \t\t\t\t 0 .25rem .5rem rgba($black, .05) !default;\r\n$modal-content-box-shadow-xs: \t\t\t\t0 .25rem .5rem rgba($black, .1) !default;\r\n$modal-content-box-shadow-sm-up: \t\t\t\t\t0 .5rem 1rem rgba($black, .1) !default;\r\n\r\n$zindex-modal: 1050 !default;\r\n$modal-backdrop-bg: \t\t \t\t\t$black !default;\r\n$modal-backdrop-opacity: \t\t\t\t.2 !default;\r\n$modal-header-border-color: \t\t\t\t$border-color !default;\r\n$modal-footer-border-color: \t\t\t \t$border-color !default;\r\n$modal-header-border-width: \t\t\t\t1px !default;\r\n$modal-footer-border-width: \t\t\t\t1px !default;\r\n$modal-header-padding-y: \t\t\t\t1.5rem !default;\r\n$modal-header-padding-x: \t\t\t\t1.75rem !default;\r\n$modal-header-padding: \t\t\t\t$modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility\r\n\r\n$modal-xl: \t\t \t\t\t1140px !default;\r\n$modal-lg: \t\t\t\t800px !default;\r\n$modal-md: \t\t\t\t500px !default;\r\n$modal-sm: \t\t\t\t300px !default;\r\n\r\n\r\n// Pagination\r\n$pagination-color: \t\t\t\t$primary !default;\r\n$pagination-border-color: \t\t\t\t$gray-300 !default;\r\n$pagination-hover-bg: \t \t\t\t\t$gray-200 !default;\r\n$pagination-hover-border-color: \t\t\t\t$gray-300 !default;\r\n$pagination-disabled-border-color: \t\t\t\t$gray-200 !default;\r\n\r\n\r\n// Dropdowns\r\n// Dropdown menu container and contents.\r\n$dropdown-box-shadow:\t\t\t\t\t\t\t\t0px 0px 50px 0px rgba(82,63,105, 0.15) !default;\r\n$zindex-dropdown: \t\t\t\t98 !default;\r\n$dropdown-border-radius: $border-radius !default;\r\n$dropdown-border-width: 0 !default;\r\n$dropdown-item-padding-y: .75rem !default;\r\n$dropdown-item-padding-x: 1.25rem !default;\r\n$dropdown-divider-bg: $gray-200 !default;\r\n$dropdown-menu-widths: (\r\n\tsm: 175px,\r\n\tmd: 250px,\r\n\tlg: 350px,\r\n\txl: 400px,\r\n\txxl: 600px\r\n); // Custom variable\r\n\r\n\r\n// Popovers\r\n$popover-font-size: \t\t\t\t0.9rem !default;\r\n$popover-max-width: \t\t\t\t276px !default;\r\n$popover-border-width: \t\t\t\t1px !default;\r\n$popover-border-color: \t\t\t\t#ffffff !default;\r\n$popover-border-radius: \t\t\t\t$border-radius !default;\r\n$popover-box-shadow: \t\t\t\t0px 0px 20px 0px rgba(0,0,0,0.15) !default;\r\n$popover-header-bg: \t\t\t\t#ffffff !default;\r\n$popover-header-color: \t\t\t\t$dark !default;\r\n$popover-header-font-weight: \t\t\t\t500 !default; // Custom variable\r\n$popover-header-font-size: \t\t\t\t1rem !default; // Custom variable\r\n$popover-header-padding-y: \t\t\t\t1rem !default;\r\n$popover-header-padding-x: \t\t\t\t1.25rem !default;\r\n$popover-header-border-color: $gray-200 !default; // Custom variable\r\n$popover-body-color: \t\t\t\t$body-color !default;\r\n\r\n\r\n// Tooltips\r\n$tooltip-font-size: \t\t\t\t0.9rem !default;\r\n$tooltip-max-width: \t\t\t\t200px !default;\r\n$tooltip-color: \t\t\t\t$dark-75 !default;\r\n$tooltip-bg: \t\t\t\t#ffffff !default;\r\n$tooltip-border-radius: \t\t\t\t3px !default;\r\n$tooltip-opacity: \t\t\t\t1 !default;\r\n$tooltip-box-shadow: \t\t\t\t$popover-box-shadow !default; // Custom variable\r\n$tooltip-padding-y: \t\t\t\t.75rem !default;\r\n$tooltip-padding-x: \t\t\t\t1rem !default;\r\n$tooltip-margin: \t\t\t\t0 !default;\r\n\r\n// Custom Toasts\r\n$toast-zindex:\t\t\t\t\t\t\t\t\t\t$zindex-dropdown + 100 !default;\r\n$toast-spacing:\t\t\t\t\t\t\t\t\t\t2rem !default;\r\n$toast-width: \t\t\t\t\t\t\t\t\t\t350px !default;\r\n$toast-box-shadow:\t\t\t\t\t\t\t\t\t$dropdown-box-shadow !default;\r\n$toast-header-color: \t\t\t\t\t\t\t\t$dark-75 !default;\r\n$toast-header-background-color: \t\t\t\t\t#fff !default;\r\n$toast-header-border-color:\t\t\t\t\t\t\t$gray-200 !default;\r\n\r\n\r\n// Progress bars\r\n$progress-height: 1rem !default;\r\n$progress-height-xs: 0.5rem !default; // Custom variable\r\n$progress-height-sm: 0.75rem !default; // Custom variable\r\n$progress-height-lg: 1.5rem !default; // Custom variable\r\n$progress-bg: $gray-200 !default;\r\n$progress-border-radius: $border-radius !default;\r\n$progress-box-shadow: none !default;\r\n$progress-bar-color: $white !default;\r\n$progress-bar-bg: $primary !default;\r\n$progress-bar-animation-timing: 1s linear infinite !default;\r\n$progress-bar-transition: width .6s ease !default;\r\n\r\n// Badges\r\n$badge-padding-y: \t\t\t\t.5em !default;\r\n$badge-padding-x: \t\t\t\t.75em !default;\r\n$badge-font-size: \t\t\t\t85% !default;\r\n\r\n\r\n// Code\r\n$code-bg: $gray-100 !default; // Custom variable\r\n$code-padding: 0.15rem 0.5rem !default; // Custom variable\r\n\r\n\r\n// Modals\r\n// Padding applied to the modal body\r\n$modal-inner-padding: 1rem !default;\r\n$modal-dialog-margin: .5rem !default;\r\n$modal-dialog-margin-y-sm-up: 1.75rem !default;\r\n$modal-title-color: $dark !default; // Custom variable\r\n$modal-title-font-weight: 500 !default; // Custom variable\r\n$modal-title-font-size: 1.3rem !default; // Custom variable\r\n$modal-title-small-color: $text-muted !default; // Custom variable\r\n$modal-title-small-font-weight: 400 !default; // Custom variable\r\n$modal-title-small-font-size: 0.9rem !default; // Custom variable\r\n$modal-title-close-font-size: 1rem !default; // Custom variable\r\n$modal-title-close-color: $text-muted !default; // Custom variable\r\n$modal-title-close-hover-color: $primary !default; // Custom variable\r\n\r\n$modal-content-color: null !default;\r\n$modal-content-bg: $white !default;\r\n$modal-content-border-color: rgba($black, .2) !default;\r\n$modal-content-border-radius: $border-radius-lg !default;\r\n$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;\r\n$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;\r\n\r\n$modal-backdrop-bg: $black !default;\r\n$modal-backdrop-opacity: .5 !default;\r\n$modal-header-border-color: $border-color !default;\r\n$modal-footer-border-color: $modal-header-border-color !default;\r\n\r\n$modal-xl: 1140px !default;\r\n$modal-lg: 800px !default;\r\n$modal-md: 500px !default;\r\n$modal-sm: 300px !default;\r\n\r\n\r\n// Pagination\r\n$pagination-padding-y: .5rem !default;\r\n$pagination-padding-x: .75rem !default;\r\n$pagination-padding-y-sm: .25rem !default;\r\n$pagination-padding-x-sm: .5rem !default;\r\n$pagination-padding-y-lg: .75rem !default;\r\n$pagination-padding-x-lg: 1.5rem !default;\r\n$pagination-line-height: 1.25 !default;\r\n\r\n$pagination-color: $link-color !default;\r\n$pagination-bg: $white !default;\r\n$pagination-border-color: $gray-300 !default;\r\n\r\n$pagination-focus-box-shadow: none !default;\r\n$pagination-focus-outline: 0 !default;\r\n\r\n$pagination-hover-color: $link-hover-color !default;\r\n$pagination-hover-bg: $gray-200 !default;\r\n$pagination-hover-border-color: $gray-300 !default;\r\n\r\n$pagination-disabled-color: $gray-600 !default;\r\n$pagination-disabled-bg: $white !default;\r\n$pagination-disabled-border-color: $gray-300 !default;\r\n\r\n// Alerts\r\n//\r\n// Define alert colors, border radius, and padding.\r\n$alert-box-shadow: \t\t\t\t\t$card-box-shadow !default; // Custom variable\r\n","//\r\n// Custom Components Config\r\n// To override any custom variable safely you can use _variables.demo.scss\r\n//\r\n\r\n// Base icons(See: plugins/keenthemes-icons/font/ki.css)\r\n$ki-types: (\r\n\tarrowDown: \t'\\f109',\r\n\tarrowUp: \t'\\f10e',\r\n\tarrowBack: \t'\\f106',\r\n\tarrowNext: \t'\\f105',\r\n\tboldClose: \t'\\f113',\r\n\tclose: \t\t'\\f130',\r\n\tplus: \t\t'\\f10d',\r\n\tminus: \t\t'\\f10a',\r\n\tcheck: \t\t'\\f108',\r\n\thide: \t\t'\\f115',\r\n\tcode: \t\t'\\f116',\r\n\tcopy: \t\t'\\f117'\r\n) !default;\r\n\r\n// Heights & Widths\r\n$heights-and-widths: (\r\n auto: auto,\r\n 1px: 1px,\r\n 2px: 2px,\r\n 3px: 3px,\r\n 4px: 4px,\r\n 5px: 5px,\r\n 10px: 10px,\r\n 15px: 15px,\r\n 20px: 20px,\r\n 25px: 25px,\r\n 30px: 30px,\r\n 35px: 35px,\r\n 40px: 40px,\r\n 45px: 45px,\r\n 50px: 50px,\r\n 55px: 55px,\r\n 60px: 60px,\r\n 65px: 65px,\r\n 70px: 70px,\r\n 75px: 75px,\r\n 80px: 80px,\r\n 85px: 85px,\r\n 90px: 90px,\r\n 95px: 95px,\r\n 100px: 100px,\r\n 125px: 125px,\r\n 150px: 150px,\r\n 175px: 175px,\r\n 200px: 200px,\r\n 225px: 225px,\r\n 250px: 250px,\r\n 275px: 275px,\r\n 300px: 300px,\r\n 325px: 325px,\r\n 350px: 350px,\r\n 375px: 375px,\r\n 400px: 400px,\r\n 425px: 425px,\r\n 450px: 450px,\r\n 475px: 475px,\r\n 500px: 500px,\r\n 550px: 550px,\r\n 600px: 600px,\r\n 650px: 650px,\r\n 700px: 700px,\r\n 750px: 750px,\r\n 800px: 800px,\r\n 850px: 850px,\r\n 900px: 900px,\r\n 950px: 950px,\r\n 1000px: 1000px,\r\n) !default;\r\n\r\n// Icon Sizes\r\n$icon-sizes: (\r\n ss: 0.5rem,\r\n xs: 0.65rem,\r\n sm: 0.75rem,\r\n nm: 0.85rem,\r\n md: 1.25rem,\r\n lg: 1.5rem,\r\n xl: 1.75rem,\r\n xxl: 2.25rem,\r\n\r\n 1x: 1rem,\r\n 2x: 2rem,\r\n 3x: 3rem,\r\n 4x: 4rem,\r\n 5x: 5rem,\r\n 6x: 6rem,\r\n 7x: 7rem,\r\n 8x: 8rem,\r\n 9x: 9rem,\r\n 10x: 10rem\r\n);\r\n\r\n// SVG Icon Sizes\r\n$svg-icon-sizes: (\r\n sm: 1.25rem,\r\n md: 1.5rem,\r\n lg: 1.75rem,\r\n xl: 2rem,\r\n xxl: 2.25rem,\r\n\r\n 1x: 1rem,\r\n 2x: 2rem,\r\n 3x: 3rem,\r\n 4x: 4rem,\r\n 5x: 5rem,\r\n 6x: 6rem,\r\n 7x: 7rem,\r\n 8x: 8rem,\r\n 9x: 9rem,\r\n\t10x: 10rem,\r\n\r\n\tfull: 100%\r\n);\r\n\r\n// Symbol Sizes\r\n$symbol-sizes: (\r\n 20: 20px,\r\n 25: 25px,\r\n 30: 30px,\r\n 35: 35px,\r\n 40: 40px,\r\n 45: 45px,\r\n default: 50px,\r\n 50: 50px,\r\n 55: 55px,\r\n 60: 60px,\r\n 65: 65px,\r\n 70: 70px,\r\n 75: 75px,\r\n 80: 80px,\r\n 85: 85px,\r\n 90: 90px,\r\n 95: 95px,\r\n 100:100px,\r\n 120:120px,\r\n 130:130px,\r\n 140:140px,\r\n 150:150px\r\n);\r\n\r\n// Burger Icon\r\n$burger-icon-config: (\r\n width: 24px,\r\n height: 24px,\r\n transition: all 0.3s,\r\n thickness: 3px,\r\n space: 5px,\r\n radius: 3px,\r\n theme: (\r\n default: $text-muted,\r\n hover: $primary,\r\n active: $primary\r\n )\r\n) !default;\r\n\r\n// Checkbox\r\n$checkbox-config: (\r\n\ttransition: all 0.3s ease,\r\n sizes: (\r\n default: (\r\n base: 18px,\r\n tick: 10px,\r\n ),\r\n lg: (\r\n base: 24px,\r\n tick: 12px,\r\n )\r\n ),\r\n\tcolor: $gray-200,\r\n\toutlineColor: $gray-400\r\n) !default;\r\n\r\n// Radio\r\n$radio-config: (\r\n\ttransition: all 0.3s ease,\r\n sizes: (\r\n default: (\r\n base: 18px,\r\n tick: 6px,\r\n ),\r\n lg: (\r\n base: 24px,\r\n tick: 8px,\r\n )\r\n ),\r\n\tcolor: $gray-200,\r\n\toutlineColor: $gray-400\r\n) !default;\r\n\r\n// Switch\r\n$switch-config: (\r\n\tcolor: $gray-200,\r\n\ttick: $primary\r\n) !default;\r\n\r\n// Scrolltop\r\n$scrolltop-config: (\r\n bottom: (\r\n desktop: 40px,\r\n tablet-and-mobile: 30px\r\n ),\r\n right: (\r\n desktop: 20px,\r\n tablet-and-mobile: 15px\r\n ),\r\n size: (\r\n desktop: 36px,\r\n tablet-and-mobile: 30px\r\n )\r\n) !default;\r\n\r\n// Datatable\r\n$datatable-config: (\r\n\t// Base\r\n\tspacer: \t\t\t\t\t$card-spacer-x,\r\n\tbg: \t\t\t\t\t\t#ffffff,\r\n\r\n\t// Scrollbar\r\n\tscrollbar-bg: \t\t\t\t$gray-200,\r\n\r\n\t// Head\r\n\thead-bg: \t\t\t\t\t$gray-100,\r\n\thead-color: \t\t\t\t$dark,\r\n\thead-sorted-color: \t\t\t$primary,\r\n\thead-icon-color: \t\t\t$primary,\r\n head-compact-color: $text-muted,\r\n head-compact-font-size: 0.9rem,\r\n head-compact-text-transform:uppercase,\r\n head-compact-font-weight: 600,\r\n head-compact-letter-spacing:0.1rem,\r\n\r\n\t// Body cell\r\n\tbody-color: \t\t\t\t$dark-75,\r\n\r\n // Cell padding\r\n cell-padding-x: 1rem,\r\n cell-padding-y: 1rem,\r\n head-cell-padding-x: 1rem,\r\n head-cell-padding-y: 0.75rem,\r\n\r\n\t// Row colors\r\n\trow-border: \t\t\t\t$gray-200,\r\n\trow-bg-even: \t\t\t\ttransparent,\r\n\trow-bg-hover: \t\t\t\ttransparent,\r\n\trow-bg-active: \t\t\t\t$gray-100,\r\n\r\n\t// Lock table shadow\r\n\tlock-shadow: \t\t\t\t0px 10px 17px 5px rgba(#000000, 0.075),\r\n\r\n\t// Subtable\r\n\tsubtable-toggle-icon: \t\t$primary,\r\n\tsubtable-expanded-bg: \t\t$gray-100,\r\n\tsubtable-pager-pagel: \t\t$gray-100,\r\n\tsubtable-shadow: \t\t\t0px 10px 15px 1px rgba(#000000, 0.05),\r\n\r\n\tdetail-icon-color: \t\t\t$primary,\r\n\tdetail-icon-color-hover: \t$primary,\r\n\r\n\t// Pagination colors\r\n page-spacer: 1rem,\r\n\tpage-size: \t\t\t\t\t2.25rem,\r\n\tpage-bg: darken($gray-100, 2%),\r\n\tpage-bg-hover: $primary,\r\n\tpage-bg-active: $primary,\r\n\r\n\tpage-color: \t\t\t\t$dark-50,\r\n\tpage-color-hover: \t\t\ttheme-inverse-color('primary'),\r\n\tpage-color-active: \t\t\ttheme-inverse-color('primary'),\r\n\r\n page-icon-color: \t\t\t$gray-500,\r\n\tpage-icon-color-hover: \t\ttheme-inverse-color('primary'),\r\n\tpage-icon-color-active: \ttheme-inverse-color('primary'),\r\n\r\n\tpage-info-bg: \t\t\t\tdarken($gray-100, 2%),\r\n\tpage-info-bg-hover: \t\t$primary,\r\n\tpage-info-color: \t\t\t$dark-50,\r\n\tpage-info-color-hover:\t \ttheme-inverse-color('primary')\r\n) !default;\r\n","//\r\n// 3rd-party config\r\n//\r\n\r\n\r\n// Custom Scroll(Perfect Scrollbar)\r\n$custom-scrollbar-size: 4px !default;\r\n$custom-scrollbar-color: $gray-300 !default;\r\n","//\r\n// Layout Config\r\n//\r\n\r\n// Root Font Sizes\r\n$root-font-size: 13px; // Root font size for desktop mode\r\n$root-font-size-lg: \t12px; // Root font size for tablet mode\r\n$root-font-size-md: \t12px; // Root font size for mobile mode\r\n\r\n// Layout Theme Colors\r\n$layout-themes: (\r\n\tdark: #1e1e2d, // Dark theme color\r\n\tlight: #ffffff // Light theme color\r\n) !default;\r\n\r\n// Page Background Color\r\n$page-bg:\t \t\t\t\t\t\t\t\t\t\t#EEF0F8 !default;\r\n\r\n// Page Paddings\r\n$page-padding: (\r\n\tdesktop: 25px, // Padding for desktop mode\r\n\ttablet-and-mobile: 15px // Padding for tablet and mobile modes\r\n) !default;\r\n\r\n// Header\r\n$header-config: (\r\n\t// Desktop Mode\r\n\tdesktop: (\r\n\t\t// Default Mode\r\n\t\tdefault: (\r\n\t\t\theight: 65px\r\n\t\t),\r\n\t\t// Fixed Mode\r\n\t\tfixed: (\r\n\t\t\tzindex: 97,\r\n\t\t\theight: 65px\r\n\t\t)\r\n\t),\r\n\r\n\t// Tablet & Mobile Modes\r\n\ttablet-and-mobile: (\r\n\t\t// Default Mode\r\n\t\tdefault: (\r\n\t\t\theight: 55px,\r\n\t\t),\r\n\t\t// Fixed Mode\r\n\t\tfixed: (\r\n\t\t\tzindex: 97,\r\n\t\t\theight: 55px\r\n\t\t)\r\n\t)\r\n) !default;\r\n\r\n// Header Menu\r\n$header-menu-config: (\r\n\t// Desktop Mode\r\n\tdesktop: (\r\n\t\t// Base Parameters\r\n\t\tbase: (\r\n\t\t\tclass: header-menu, // menu element class name\r\n\t\t\tmode: desktop // menu mode: \"desktop\", \"desktop-and-tablet\" or \"general\"\r\n\t\t),\r\n\r\n\t\t// Customize\r\n\t\tbuild: (\r\n\t\t\t// Layout\r\n\t\t\tlayout: (\r\n\t\t\t\t// Container\r\n\t\t\t\tself: (\r\n\t\t\t\t\tmargin: 0\r\n\t\t\t\t),\r\n\r\n\t\t\t\t// Item\r\n\t\t\t\titem: (\r\n\t\t\t\t\t// Item\r\n\t\t\t\t\tself: (\r\n\t\t\t\t\t\tpadding: 0px 0.25rem\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Link\r\n\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t// self\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\tpadding: 0.25rem 0.5rem\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\twidth: 30px,\r\n\t\t\t\t\t\t\tsvg-width: 23px,\r\n\t\t\t\t\t\t\tfont-size: 1.4rem,\r\n\t\t\t\t\t\t\tpadding: 0\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\twidth: 20px\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\tsize: 4px,\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\twidth: 5px,\r\n\t\t\t\t\t\t\t\theight: 1px,\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\tfont-size: 1rem,\r\n\t\t\t\t\t\t\tfont-weight: 400,\r\n\t\t\t\t\t\t\tfont-transform:\tinitial\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Label\r\n\t\t\t\t\t\tlabel:\t(\r\n\t\t\t\t\t\t\tpadding: 0px 0px 0px 5px\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\tarrow: (\r\n\t\t\t\t\t\t\twidth: 20px,\r\n\t\t\t\t\t\t\talign: flex-end,\r\n\t\t\t\t\t\t\tfont-size: 0.6rem\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Submenu\r\n\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\tzindex: get($header-config, desktop, fixed, zindex) + 1,\r\n\t\t\t\t\t\t\tpadding: (\r\n\t\t\t\t\t\t\t\tclassic: 20px 0px,\r\n\t\t\t\t\t\t\t\tmegamenu: 0px\r\n\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\tborder-radius: 4px,\r\n\t\t\t\t\t\t\twidth: (\r\n\t\t\t\t\t\t\t\tclassic: 275px, // Classic dropdown menu width\r\n\t\t\t\t\t\t\t\t// full width dropdown menu\r\n\t\t\t\t\t\t\t\tfull: (\r\n\t\t\t\t\t\t\t\t\toffset: 20px\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\tanimation: (\r\n\t\t\t\t\t\t\t\toffset: -10px\r\n\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\tspace: 1px\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tpadding: 0px\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\tpadding: 11px 30px,\r\n\t\t\t\t\t\t\t\t\tpadding-x: 30px\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\twidth: 33px,\r\n\t\t\t\t\t\t\t\t\tsvg-width: 23px,\r\n\t\t\t\t\t\t\t\t\tfont-size: 1.4rem,\r\n\t\t\t\t\t\t\t\t\tpadding: 0\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\twidth: 20px\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\tsize: 4px\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\twidth: 9px,\r\n\t\t\t\t\t\t\t\t\t\theight: 1px\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\tfont-size: 1rem,\r\n\t\t\t\t\t\t\t\t\tfont-weight: 400,\r\n\t\t\t\t\t\t\t\t\tfont-transform:\tinitial\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Label\r\n\t\t\t\t\t\t\t\tlabel:\t(\r\n\t\t\t\t\t\t\t\t\tpadding: 0px 0px 0px 5px\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\tarrow: (\r\n\t\t\t\t\t\t\t\t\tpadding: 0px 0px 0px 10px,\r\n\t\t\t\t\t\t\t\t\twidth: 20px,\r\n\t\t\t\t\t\t\t\t\tfont-size: 0.6rem\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Column\r\n\t\t\t\t\t\t\tcolumn: (\r\n\t\t\t\t\t\t\t\t// Column\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\tpadding: 0 0 20px 0\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Heading\r\n\t\t\t\t\t\t\t\theading: (\r\n\t\t\t\t\t\t\t\t\t// Heading\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\tpadding: 30px 30px 10px 30px\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Caption\r\n\t\t\t\t\t\t\t\t\tcaption: (\r\n\t\t\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\t\t\twidth: 30px,\r\n\t\t\t\t\t\t\t\t\t\t\tsvg-width: 23px,\r\n\t\t\t\t\t\t\t\t\t\t\tfont-size: 1.35rem,\r\n\t\t\t\t\t\t\t\t\t\t\tpadding: 0\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\t\tfont-size: 1.07rem,\r\n\t\t\t\t\t\t\t\t\t\t\tfont-weight: 500,\r\n\t\t\t\t\t\t\t\t\t\t\tfont-transform:\tinitial\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t\t// Label\r\n\t\t\t\t\t\t\t\t\t\tlabel:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tpadding: 0px 0px 0px 5px\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t)\r\n\t\t\t\t)\r\n\t\t\t),\r\n\r\n\t\t\t// Themes\r\n\t\t\tthemes: (\r\n\t\t\t\t// Light Theme\r\n\t\t\t\tlight: (\r\n\t\t\t\t\t// Item\r\n\t\t\t\t\titem: (\r\n\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\tdefault: none,\r\n\t\t\t\t\t\t\t\t\tactive: none,\r\n\t\t\t\t\t\t\t\t\there: none,\r\n\t\t\t\t\t\t\t\t\thover: none\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\tbg-color:\t(\r\n\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\tdefault: $dark-75,\r\n\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\tarrow: (\r\n\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tbg-color: $white,\r\n\t\t\t\t\t\t\t\tbox-shadow: 0px 15px 50px 0px rgba(82,63,105,0.15)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\t\there: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: $dark-75,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\t\tarrow: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Column\r\n\t\t\t\t\t\t\t\tcolumn: (\r\n\t\t\t\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\t\t\t\tborder: 1px solid $gray-200\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Heading\r\n\t\t\t\t\t\t\t\t\theading: (\r\n\t\t\t\t\t\t\t\t\t\t// Caption\r\n\t\t\t\t\t\t\t\t\t\tcaption: (\r\n\t\t\t\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tfont-color:\t$text-muted\r\n\t\t\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tfont-color:\t$dark\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t)\r\n\t\t\t\t),\r\n\t\t\t\t// Dark Theme\r\n\t\t\t\tdark: (\r\n\t\t\t\t\t// Item\r\n\t\t\t\t\titem: (\r\n\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\tdefault: none,\r\n\t\t\t\t\t\t\t\t\tactive: none,\r\n\t\t\t\t\t\t\t\t\there: none,\r\n\t\t\t\t\t\t\t\t\thover: none\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\tdefault: #9096b8,\r\n\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\tbg-color:\t(\r\n\t\t\t\t\t\t\t\t\t\tdefault: #9096b8,\r\n\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\tdefault: #9096b8,\r\n\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\tarrow: (\r\n\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\tdefault: #6c7293,\r\n\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tbg-color: get($layout-themes, dark),\r\n\t\t\t\t\t\t\t\tbox-shadow: 0px 0px 50px 0px rgba(82,63,105,0.15)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: transparent,\r\n\t\t\t\t\t\t\t\t\t\t\topen: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\t\thover: #1b1b28\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: #494b74,\r\n\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: #494b74,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: #494b74,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: #a2a3b7,\r\n\t\t\t\t\t\t\t\t\t\t\there: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\thover: #ffffff\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\t\tarrow: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: #494b74,\r\n\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Column\r\n\t\t\t\t\t\t\t\tcolumn: (\r\n\t\t\t\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\t\t\t\tborder: 1px solid rgba(#494b74, 0.25)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Heading\r\n\t\t\t\t\t\t\t\t\theading: (\r\n\t\t\t\t\t\t\t\t\t\t// Caption\r\n\t\t\t\t\t\t\t\t\t\tcaption: (\r\n\t\t\t\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tfont-color:\t#494b74\r\n\t\t\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tfont-color:\t#a2a3b7\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t)\r\n\t\t\t\t)\r\n\t\t\t)\r\n\t\t)\r\n\t),\r\n\r\n\t// Tablet & Mobile Modes\r\n\ttablet-and-mobile: (\r\n\t\t// Base Settings\r\n\t\tbase:\t(\r\n\t\t\tclass: header-menu-mobile,\r\n\t\t\tparent-class: header-menu-wrapper,\r\n\t\t\tmode: tablet-and-mobile, //menu mode: \"mobile\", \"tablet-and-mobile\" or \"general\"\r\n\t\t),\r\n\t\t// Customize\r\n\t\tbuild: (\r\n\t\t\t// Layout\r\n\t\t\tlayout: (\r\n\t\t\t\t// Default Mode\r\n\t\t\t\tdefault: (\r\n\t\t\t\t\t// Menu Panel\r\n\t\t\t\t\tself: (\r\n\t\t\t\t\t\tpadding: 10px 0\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Item\r\n\t\t\t\t\titem: (\r\n\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\tmargin:\t0\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\theight: 44px,\r\n\t\t\t\t\t\t\t\tpadding: 9px 30px\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\ticon:\t(\r\n\t\t\t\t\t\t\t\twidth: 35px,\r\n\t\t\t\t\t\t\t\tfont-size: 1.4rem\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\twidth: 15px,\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\tsize: 4px\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\twidth: 5px,\r\n\t\t\t\t\t\t\t\t\theight: 1px\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\ttext:\t(\r\n\t\t\t\t\t\t\t\tfont-size: 1.02rem,\r\n\t\t\t\t\t\t\t\tfont-weight: 400,\r\n\t\t\t\t\t\t\t\tfont-transform:\tinitial\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\twidth: 20px,\r\n\t\t\t\t\t\t\t\ttransition: all 0.3s ease,\r\n\t\t\t\t\t\t\t\tfont-size: 0.6rem\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Label\r\n\t\t\t\t\t\t\tlabel:\t(\r\n\t\t\t\t\t\t\t\tpadding: 0px 0px 0px 5px,\r\n\t\t\t\t\t\t\t\talign: right\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tindent: 15px,\r\n\t\t\t\t\t\t\t\tmargin:\t0\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\tmargin:\t0\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\theight: 40px,\r\n\t\t\t\t\t\t\t\t\t\tpadding: 0 30px,\r\n\t\t\t\t\t\t\t\t\t\tpadding-x: 30px\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\t\ticon:\t(\r\n\t\t\t\t\t\t\t\t\t\twidth: 35px,\r\n\t\t\t\t\t\t\t\t\t\tfont-size: 1.35rem\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\t\twidth: 20px,\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\t\tsize: 4px\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\t\twidth: 5px,\r\n\t\t\t\t\t\t\t\t\t\t\theight: 1px\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\t\ttext:\t(\r\n\t\t\t\t\t\t\t\t\t\tfont-size: 1rem,\r\n\t\t\t\t\t\t\t\t\t\tfont-weight: 400,\r\n\t\t\t\t\t\t\t\t\t\tfont-transform:\tinitial\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\t\t\twidth: 20px,\r\n\t\t\t\t\t\t\t\t\t\ttransition: all 0.3s ease,\r\n\t\t\t\t\t\t\t\t\t\tfont-size: 0.6rem\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Label\r\n\t\t\t\t\t\t\t\t\tlabel:\t(\r\n\t\t\t\t\t\t\t\t\t\tpadding: 0px 0px 0px 5px\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Section\r\n\t\t\t\t\t\t\tsection: (\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\tindent: 15px,\r\n\t\t\t\t\t\t\t\t\tpadding: 0 25px,\r\n\t\t\t\t\t\t\t\t\tmargin: 20px 0 0 0,\r\n\t\t\t\t\t\t\t\t\theight: 40px\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\tfont-size: 0.8rem,\r\n\t\t\t\t\t\t\t\t\tfont-weight: 300,\r\n\t\t\t\t\t\t\t\t\tfont-transform: uppercase,\r\n\t\t\t\t\t\t\t\t\tletter-spacing: 0.3px\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\tfont-size: 1.1rem\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\t\tmargin: 15px 0\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Section\r\n\t\t\t\t\tsection: (\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\tpadding: 0 27px,\r\n\t\t\t\t\t\t\tmargin: 20px 0 0 0,\r\n\t\t\t\t\t\t\theight: 40px\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\tfont-size: 0.83rem,\r\n\t\t\t\t\t\t\tfont-weight: 500,\r\n\t\t\t\t\t\t\tfont-transform: uppercase,\r\n\t\t\t\t\t\t\tletter-spacing: 0.3px\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\tfont-size: 1.1rem\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Separator\r\n\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\tmargin: 15px 0,\r\n\t\t\t\t\t)\r\n\t\t\t\t)\r\n\t\t\t),\r\n\r\n\t\t\t// Themes\r\n\t\t\tthemes: (\r\n\t\t\t\t// Dark Theme\r\n\t\t\t\tdark: (\r\n\t\t\t\t\t// Default Mode\r\n\t\t\t\t\tdefault: (\r\n\t\t\t\t\t\t// Container\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\tbg-color: get($layout-themes, dark)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\t\there: null,\r\n\t\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\tdefault: transparent,\r\n\t\t\t\t\t\t\t\t\t\topen: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\there: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\tactive: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\thover: #1b1b28\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\tdefault: #494b74,\r\n\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\ttext:\t(\r\n\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\tdefault: #a2a3b7,\r\n\t\t\t\t\t\t\t\t\t\topen: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\there: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\tactive: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\thover: #ffffff\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\topen: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\there: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\tactive: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\thover: #ffffff\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\t\t\t\there: null,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: transparent,\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: #1b1b28\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\t\t\ticon:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: #494b74,\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: #9899ac,\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: #ffffff\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: #ffffff\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Section\r\n\t\t\t\t\t\t\t\tsection: (\r\n\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color: #4c4e6f\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color: #4c4e6f\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\t\t\tborder: 1px solid #4c4e6f\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Section\r\n\t\t\t\t\t\tsection: (\r\n\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\tfont-color: #4c4e6f\r\n\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\tfont-color: #4c4e6f\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\tborder: 1px solid #4c4e6f\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t)\r\n\t\t\t\t),\r\n\r\n\t\t\t\t// Light Theme\r\n\t\t\t\tlight: (\r\n\t\t\t\t\t// Default Mode\r\n\t\t\t\t\tdefault: (\r\n\t\t\t\t\t\t// Container\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\tbg-color: get($layout-themes, light)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// root item\r\n\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\t\there: null,\r\n\t\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\t\topen: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\there: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\tactive: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\thover: $gray-100\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\ttext:\t(\r\n\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\tdefault: $dark-75,\r\n\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\t\t\t\there: null,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $gray-100\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\t\t\ticon:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: $dark-75,\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: $text-muted,\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Section\r\n\t\t\t\t\t\t\t\tsection: (\r\n\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color: $dark-50\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color: $text-muted\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\t\t\tborder: 1px solid $gray-200\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Section\r\n\t\t\t\t\t\tsection: (\r\n\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\tfont-color: $dark-50\r\n\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\tfont-color: $text-muted\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\tborder: 1px solid $gray-200\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t)\r\n\t\t\t\t)\r\n\t\t\t)\r\n\t\t)\r\n\t),\r\n\r\n\t// Offcanvas Mobile\r\n\toffcanvas-mobile: (\r\n\t\twidth: 275px,\r\n\t\tzindex: 1001,\r\n\t\tbg-color: #ffffff,\r\n\t\tshadow: 0px 1px 9px -3px rgba(0,0,0,0.75),\r\n\t\toverlay-bg-color: rgba(#000000, 0.1)\r\n\t)\r\n) !default;\r\n\r\n// Header Topbar\r\n$header-topbar-config: (\r\n\t// Tablet & Mobile Modes\r\n\ttablet-and-mobile: (\r\n\t\theight: 50px,\r\n\t\tbg-color: $white,\r\n\t\tshadow: 0px 1px 9px -3px rgba(0,0,0, 0.1),\r\n\t\tborder-color: $gray-200\r\n\t)\r\n) !default;\r\n\r\n// Aside\r\n$aside-config: (\r\n\t// Aside\r\n\tbase: (\r\n\t\twidth: 265px,\r\n\t\tminimized-width: 70px,\r\n\t\tzindex: 98,\r\n\t\tscrollbar-width: 4px\r\n\t),\r\n\r\n\t// Offcanvas Mobile\r\n\toffcanvas-mobile: (\r\n\t\twidth: 275px,\r\n\t\tzindex: 1001,\r\n\t\tbg-color: #ffffff,\r\n\t\tshadow: 0px 1px 9px -3px rgba(0,0,0,0.75),\r\n\t\toverlay-bg-color: rgba(#000000, 0.1)\r\n\t)\r\n) !default;\r\n\r\n// Aside Menu\r\n$aside-menu-config: (\r\n\t// Base parameters required to build the base menu(see mixin: src/sass/components/mixins/_menu-vertical.scss)\r\n\tbase:\t(\r\n\t\tclass: aside-menu, // Menu element class name\r\n\t\tparent-class: aside, // Menu parent aside element class name\r\n\t\tmode: general, // Menu responsive mode: general or tablet-and-mobile\r\n\t),\r\n\r\n\t// Customize\r\n\tbuild: (\r\n\t\t// layout\r\n\t\tlayout: (\r\n\t\t\t// Default Mode\r\n\t\t\tdefault: (\r\n\t\t\t\t// Container\r\n\t\t\t\tself: (\r\n\t\t\t\t\tpadding: 15px 0\r\n\t\t\t\t),\r\n\r\n\t\t\t\t// Item\r\n\t\t\t\titem: (\r\n\t\t\t\t\t// Item\r\n\t\t\t\t\tself: (\r\n\t\t\t\t\t\tmargin:\t0\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Link\r\n\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\theight: 44px,\r\n\t\t\t\t\t\t\tpadding: 9px 25px\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\ticon:\t(\r\n\t\t\t\t\t\t\twidth: 35px,\r\n\t\t\t\t\t\t\tsvg-width: 23px,\r\n\t\t\t\t\t\t\tfont-size: 1.3rem\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\twidth: 15px,\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\tsize: 4px\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\twidth: 5px,\r\n\t\t\t\t\t\t\t\theight: 1px\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\ttext:\t(\r\n\t\t\t\t\t\t\tfont-size: 1rem,\r\n\t\t\t\t\t\t\tfont-weight: 400,\r\n\t\t\t\t\t\t\tfont-transform:\tinitial\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\twidth: 20px,\r\n\t\t\t\t\t\t\ttransition: all 0.3s ease,\r\n\t\t\t\t\t\t\tfont-size: 0.6rem\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Label\r\n\t\t\t\t\t\tlabel:\t(\r\n\t\t\t\t\t\t\tpadding: 0px 0px 0px 5px\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Submenu\r\n\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\tindent: 15px,\r\n\t\t\t\t\t\t\tmargin:\t0\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tmargin:\t0\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\theight: 40px,\r\n\t\t\t\t\t\t\t\t\tpadding: 0 25px,\r\n\t\t\t\t\t\t\t\t\tpadding-x: 25px\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\ticon:\t(\r\n\t\t\t\t\t\t\t\t\twidth: 35px,\r\n\t\t\t\t\t\t\t\t\tsvg-width: 24px,\r\n\t\t\t\t\t\t\t\t\tfont-size: 1.3rem\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\twidth: 15px,\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\tsize: 4px\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\twidth: 5px,\r\n\t\t\t\t\t\t\t\t\t\theight: 1px\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\ttext:\t(\r\n\t\t\t\t\t\t\t\t\tfont-size: 1rem,\r\n\t\t\t\t\t\t\t\t\tfont-weight: 400,\r\n\t\t\t\t\t\t\t\t\tfont-transform:\tinitial\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\t\twidth: 20px,\r\n\t\t\t\t\t\t\t\t\ttransition: all 0.3s ease,\r\n\t\t\t\t\t\t\t\t\tfont-size: 0.6rem\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Label\r\n\t\t\t\t\t\t\t\tlabel:\t(\r\n\t\t\t\t\t\t\t\t\tpadding: 0px 0px 0px 5px\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Section\r\n\t\t\t\t\t\tsection: (\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tindent: 15px,\r\n\t\t\t\t\t\t\t\tpadding: 0 25px,\r\n\t\t\t\t\t\t\t\tmargin: 20px 0 0 0,\r\n\t\t\t\t\t\t\t\theight: 40px\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\tfont-size: 0.8rem,\r\n\t\t\t\t\t\t\t\tfont-weight: 300,\r\n\t\t\t\t\t\t\t\tfont-transform: uppercase,\r\n\t\t\t\t\t\t\t\tletter-spacing: 0.3px\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\tfont-size: 1.1rem\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\tmargin: 15px 0\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t)\r\n\t\t\t\t),\r\n\r\n\t\t\t\t// Section\r\n\t\t\t\tsection: (\r\n\t\t\t\t\tself: (\r\n\t\t\t\t\t\tpadding: 0 25px,\r\n\t\t\t\t\t\tmargin: 20px 0 0 0,\r\n\t\t\t\t\t\theight: 40px\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\ttext: (\r\n\t\t\t\t\t\tfont-size: 0.9rem,\r\n\t\t\t\t\t\tfont-weight: 500,\r\n\t\t\t\t\t\tfont-transform: uppercase,\r\n\t\t\t\t\t\tletter-spacing: 0.3px\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\ticon: (\r\n\t\t\t\t\t\tfont-size: 1.1rem\r\n\t\t\t\t\t)\r\n\t\t\t\t),\r\n\r\n\t\t\t\t// Separator\r\n\t\t\t\tseparator: (\r\n\t\t\t\t\tmargin: 15px 0,\r\n\t\t\t\t)\r\n\t\t\t),\r\n\r\n\t\t\t// Minimize Mode\r\n\t\t\tminimize: (\r\n\t\t\t\t// Container\r\n\t\t\t\tself: (\r\n\t\t\t\t\tpadding: 15px 0,\r\n\t\t\t\t\twidth: get($aside-config, base, width), // should be equal to the minimized aside width\r\n\t\t\t\t),\r\n\r\n\t\t\t\t// Item\r\n\t\t\t\titem: (\r\n\t\t\t\t\t// Item\r\n\t\t\t\t\tself: (\r\n\t\t\t\t\t\tzindex:\tget($aside-config, base, width),\r\n\t\t\t\t\t\twidth: get($aside-config, base, width) + 255px + 1px,\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Link\r\n\t\t\t\t\tlink: (\r\n\t\t\t\t\t\tlabel: (\r\n\t\t\t\t\t\t\tright: 7px,\r\n\t\t\t\t\t\t\tsize: 6px\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Submenu\r\n\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\twidth: 255px,\r\n\t\t\t\t\t\t\tmargin-left: get($aside-config, base, width) + 1px\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\tparent-item: (\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tmargin:\t0\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\theight: 40px,\r\n\t\t\t\t\t\t\t\t\tmargin-bottom: 0px,\r\n\t\t\t\t\t\t\t\t\tpadding: 0 30px 10px 30px\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\ttext:\t(\r\n\t\t\t\t\t\t\t\t\tfont-size: 1.05rem,\r\n\t\t\t\t\t\t\t\t\tfont-weight: 400,\r\n\t\t\t\t\t\t\t\t\tfont-transform:\tinitial\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Label\r\n\t\t\t\t\t\t\t\tlabel:\t(\r\n\t\t\t\t\t\t\t\t\tpadding: 0px 0px 0px 5px\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t)\r\n\t\t\t\t),\r\n\r\n\t\t\t\t// Section\r\n\t\t\t\tsection: (\r\n\t\t\t\t\ticon: (\r\n\t\t\t\t\t\tfont-size: 1.1rem,\r\n\t\t\t\t\t\tpadding: 0\r\n\t\t\t\t\t)\r\n\t\t\t\t),\r\n\t\t\t),\r\n\r\n\t\t\t// Dropdown Mode\r\n\t\t\tdropdown: (\r\n\t\t\t\t// Item\r\n\t\t\t\titem: (\r\n\t\t\t\t\t// Item\r\n\t\t\t\t\tself: (\r\n\t\t\t\t\t\tmargin: 0,\r\n\t\t\t\t\t\tzindex:\tget($header-config, desktop, fixed, zindex) + 1, // Aside's dropdown z-index has to be greater that fixed header's z-index\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Submenu\r\n\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\tpadding: 20px 0,\r\n\t\t\t\t\t\t\twidth: 265px, // Should be equal to the parent aside width\r\n\t\t\t\t\t\t\tparent-width: 265px, // Should be equal to the parent aside width\r\n\t\t\t\t\t\t\tborder-radius: 4px,\r\n\r\n\t\t\t\t\t\t\t// Animation\r\n\t\t\t\t\t\t\tanimation: (\r\n\t\t\t\t\t\t\t\toffset: 10px\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Vertical Offset\r\n\t\t\t\t\t\t\toffset: (\r\n\t\t\t\t\t\t\t\troot: (\r\n\t\t\t\t\t\t\t\t\tdefault: -5px,\r\n\t\t\t\t\t\t\t\t\tup: -10px\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\tinner: (\r\n\t\t\t\t\t\t\t\t\tdefault: -10px,\r\n\t\t\t\t\t\t\t\t\tup: -10px\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tmargin:\t0\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\theight: 40px,\r\n\t\t\t\t\t\t\t\t\tpadding: 7px 30px\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\ticon:\t(\r\n\t\t\t\t\t\t\t\t\twidth: 35px,\r\n\t\t\t\t\t\t\t\t\tfont-size: 1.35rem\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\twidth: 15px,\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\tsize: 4px\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\twidth: 5px,\r\n\t\t\t\t\t\t\t\t\t\theight: 1px\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\ttext:\t(\r\n\t\t\t\t\t\t\t\t\tfont-size: 1rem,\r\n\t\t\t\t\t\t\t\t\tfont-weight: 400,\r\n\t\t\t\t\t\t\t\t\tfont-transform:\tinitial\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\t\twidth: 20px,\r\n\t\t\t\t\t\t\t\t\ttransition: all 0.3s ease,\r\n\t\t\t\t\t\t\t\t\tfont-size: 0.6rem\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Label\r\n\t\t\t\t\t\t\t\tlabel:\t(\r\n\t\t\t\t\t\t\t\t\tpadding: 0px 0px 0px 5px,\r\n\t\t\t\t\t\t\t\t\talign: right,\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Section\r\n\t\t\t\t\t\tsection: (\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tmargin: 20px 0 0 0,\r\n\t\t\t\t\t\t\t\tpadding: 0 25px,\r\n\t\t\t\t\t\t\t\theight: 40px\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\tfont-size: 0.8rem,\r\n\t\t\t\t\t\t\t\tfont-weight: 300,\r\n\t\t\t\t\t\t\t\tfont-transform: uppercase,\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\tfont-size: 1.1rem,\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\tmargin: 15px 0,\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t)\r\n\t\t\t\t)\r\n\t\t\t)\r\n\t\t),\r\n\r\n\t\t// Themes\r\n\t\tthemes: (\r\n\t\t\t// Dark Theme\r\n\t\t\tdark: (\r\n\t\t\t\t// Default Mode\r\n\t\t\t\tdefault: (\r\n\t\t\t\t\t// Container\r\n\t\t\t\t\tself: (\r\n\t\t\t\t\t\tbg-color: get($layout-themes, dark)\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Item\r\n\t\t\t\t\titem: (\r\n\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\there: null,\r\n\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\tdefault: transparent,\r\n\t\t\t\t\t\t\t\t\topen: #1b1b28,\r\n\t\t\t\t\t\t\t\t\there: #1b1b28,\r\n\t\t\t\t\t\t\t\t\tactive: #1b1b28,\r\n\t\t\t\t\t\t\t\t\thover: #1b1b28\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\tdefault: #494b74,\r\n\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\ttext:\t(\r\n\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\tdefault: #a2a3b7,\r\n\t\t\t\t\t\t\t\t\topen: #ffffff,\r\n\t\t\t\t\t\t\t\t\there: #ffffff,\r\n\t\t\t\t\t\t\t\t\tactive: #ffffff,\r\n\t\t\t\t\t\t\t\t\thover: #ffffff\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\topen: #ffffff,\r\n\t\t\t\t\t\t\t\t\there: #ffffff,\r\n\t\t\t\t\t\t\t\t\tactive: #ffffff,\r\n\t\t\t\t\t\t\t\t\thover: #ffffff\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\t\t\there: null,\r\n\t\t\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: transparent,\r\n\t\t\t\t\t\t\t\t\t\t\topen: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\t\there: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: #1b1b28,\r\n\t\t\t\t\t\t\t\t\t\t\thover: #1b1b28\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\t\ticon:\t(\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: #494b74,\r\n\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: #9899ac,\r\n\t\t\t\t\t\t\t\t\t\t\topen: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\thover: #ffffff\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: #5c5e81,\r\n\t\t\t\t\t\t\t\t\t\t\topen: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\there: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: #ffffff,\r\n\t\t\t\t\t\t\t\t\t\t\thover: #ffffff\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Section\r\n\t\t\t\t\t\t\tsection: (\r\n\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\tfont-color: #4c4e6f\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\tfont-color: #4c4e6f\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\t\tborder: 1px solid #4c4e6f\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Section\r\n\t\t\t\t\tsection: (\r\n\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\tfont-color: #4c4e6f\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\tfont-color: #4c4e6f\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t),\r\n\r\n\t\t\t\t\t// Separator\r\n\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\tborder: 1px solid #4c4e6f\r\n\t\t\t\t\t)\r\n\t\t\t\t),\r\n\r\n\t\t\t\t// Minimize Mode\r\n\t\t\t\tminimize: (\r\n\t\t\t\t\t// root item\r\n\t\t\t\t\titem: (\r\n\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t// self\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\ticon:\t(\r\n\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\tdefault: #7c87a6,\r\n\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t)\r\n\t\t\t\t),\r\n\r\n\t\t\t\t// Dropdown Mode\r\n\t\t\t\tdropdown: (\r\n\t\t\t\t\t// Item\r\n\t\t\t\t\titem: (\r\n\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\tsubmenu: (\r\n\t\t\t\t\t\t\t// Submenu\r\n\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t// submenu base styles\r\n\t\t\t\t\t\t\t\tbg-color: #fff,\r\n\t\t\t\t\t\t\t\tbox-shadow: 0px 0px 50px 0px rgba(82,63,105,0.15),\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\titem: (\r\n\t\t\t\t\t\t\t\t// Item\r\n\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\t\topen: null,\r\n\t\t\t\t\t\t\t\t\t\there: null,\r\n\t\t\t\t\t\t\t\t\t\tactive: null,\r\n\t\t\t\t\t\t\t\t\t\thover: null\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\tlink: (\r\n\t\t\t\t\t\t\t\t\t// Link\r\n\t\t\t\t\t\t\t\t\tself: (\r\n\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: null,\r\n\t\t\t\t\t\t\t\t\t\t\topen: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\t\there: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $gray-100,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $gray-100\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Icon\r\n\t\t\t\t\t\t\t\t\ticon:\t(\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: lighten(#8c8ea4, 10%),\r\n\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t\t\t\t\t\t\tbullet:\t(\r\n\t\t\t\t\t\t\t\t\t\tdot: (\r\n\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: lighten(#8c8ea4, 10%),\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t\tline: (\r\n\t\t\t\t\t\t\t\t\t\t\tbg-color: (\r\n\t\t\t\t\t\t\t\t\t\t\t\tdefault: lighten(#8c8ea4, 10%),\r\n\t\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\there: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Text\r\n\t\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: darken(#868aa8, 10%),\r\n\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\t\t// Arrow\r\n\t\t\t\t\t\t\t\t\tarrow:\t(\r\n\t\t\t\t\t\t\t\t\t\tfont-color:\t(\r\n\t\t\t\t\t\t\t\t\t\t\tdefault: lighten(#8c8ea4, 10%),\r\n\t\t\t\t\t\t\t\t\t\t\topen: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\tactive: $primary,\r\n\t\t\t\t\t\t\t\t\t\t\thover: $primary\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Section\r\n\t\t\t\t\t\t\tsection: (\r\n\t\t\t\t\t\t\t\ttext: (\r\n\t\t\t\t\t\t\t\t\tfont-color: lighten(#868aa8, 10%)\r\n\t\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t\ticon: (\r\n\t\t\t\t\t\t\t\t\tfont-color: lighten(#868aa8, 12%)\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\t\t// Separator\r\n\t\t\t\t\t\t\tseparator: (\r\n\t\t\t\t\t\t\t\tborder: 1px solid rgba(#000000, 0.07)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t)\r\n\t\t\t\t)\r\n\t\t\t),\r\n\r\n\t\t\t// Light Theme\r\n\t\t\tlight: (\r\n\t\t\t // Default Mode\r\n\t\t\t default: (\r\n\t\t\t // Dropdown\r\n\t\t\t self: (\r\n\t\t\t bg-color: get($layout-themes, light)\r\n\t\t\t ),\r\n\r\n\t\t\t // Item\r\n\t\t\t item: (\r\n\t\t\t // Item\r\n\t\t\t self: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: null,\r\n\t\t\t open: null,\r\n\t\t\t here: null,\r\n\t\t\t active: null,\r\n\t\t\t hover: null\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Link\r\n\t\t\t link: (\r\n\t\t\t // Link\r\n\t\t\t self: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: null,\r\n\t\t\t open: $gray-100,\r\n\t\t\t here: $gray-100,\r\n\t\t\t active: $gray-100,\r\n\t\t\t hover: $gray-100\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Icon\r\n\t\t\t icon: (\r\n\t\t\t font-color:\t(\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t here: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t ),\r\n\t\t\t ),\r\n\r\n\t\t\t // Bullet\r\n\t\t\t bullet:\t(\r\n\t\t\t dot: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t here: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t line: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t here: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Text\r\n\t\t\t text:\t(\r\n\t\t\t font-color:\t(\r\n\t\t\t default: $dark-75,\r\n\t\t\t open: $primary,\r\n\t\t\t here: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Arrow\r\n\t\t\t arrow:\t(\r\n\t\t\t font-color:\t(\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t here: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Submenu\r\n\t\t\t submenu: (\r\n\t\t\t // Submenu\r\n\t\t\t self: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: null,\r\n\t\t\t open: null,\r\n\t\t\t active: null,\r\n\t\t\t hover: null\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Item\r\n\t\t\t item: (\r\n\t\t\t // Item\r\n\t\t\t self: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: null,\r\n\t\t\t open: null,\r\n\t\t\t here: null,\r\n\t\t\t active: null,\r\n\t\t\t hover: null\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Link\r\n\t\t\t link: (\r\n\t\t\t // Link\r\n\t\t\t self: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: null,\r\n\t\t\t open: $gray-100,\r\n\t\t\t here: $gray-100,\r\n\t\t\t active: $gray-100,\r\n\t\t\t hover: $gray-100\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Icon\r\n\t\t\t icon:\t(\r\n\t\t\t font-color:\t(\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t\t\t\t\t\t\t// Bullet\r\n\t\t\t bullet:\t(\r\n\t\t\t dot: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t here: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t line: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t here: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Text\r\n\t\t\t text: (\r\n\t\t\t font-color:\t(\r\n\t\t\t default: $dark-75,\r\n\t\t\t open: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Arrow\r\n\t\t\t arrow:\t(\r\n\t\t\t font-color:\t(\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Section\r\n\t\t\t section: (\r\n\t\t\t text: (\r\n\t\t\t font-color: $dark-50\r\n\t\t\t ),\r\n\r\n\t\t\t icon: (\r\n\t\t\t font-color: $text-muted\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Separator\r\n\t\t\t separator: (\r\n\t\t\t border: 1px solid $gray-200\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Section\r\n\t\t\t section: (\r\n\t\t\t text: (\r\n\t\t\t font-color: $dark-50\r\n\t\t\t ),\r\n\t\t\t icon: (\r\n\t\t\t font-color: $text-muted\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Separator\r\n\t\t\t separator: (\r\n\t\t\t border: 1px solid $gray-200\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Minimize Mode\r\n\t\t\t minimize: (\r\n\t\t\t // Item\r\n\t\t\t item: (\r\n\t\t\t // Link\r\n\t\t\t link: (\r\n\t\t\t // Link\r\n\t\t\t self: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: null,\r\n\t\t\t open: null,\r\n\t\t\t active: null,\r\n\t\t\t hover: null\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Icon\r\n\t\t\t icon:\t(\r\n\t\t\t font-color:\t(\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary,\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Dropdown Mode\r\n\t\t\t dropdown: (\r\n\t\t\t // Item\r\n\t\t\t item: (\r\n\t\t\t // Submenu\r\n\t\t\t submenu: (\r\n\t\t\t // Submenu\r\n\t\t\t self: (\r\n\t\t\t // submenu base styles\r\n\t\t\t bg-color: $white,\r\n\t\t\t box-shadow: 0px 0px 50px 0px rgba(82,63,105,0.15),\r\n\t\t\t ),\r\n\r\n\t\t\t // Item\r\n\t\t\t item: (\r\n\t\t\t // Item\r\n\t\t\t self: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: null,\r\n\t\t\t open: null,\r\n\t\t\t here: null,\r\n\t\t\t active: null,\r\n\t\t\t hover: null\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Link\r\n\t\t\t link: (\r\n\t\t\t // Link\r\n\t\t\t self: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: null,\r\n\t\t\t open: $gray-100,\r\n\t\t\t here: $gray-100,\r\n\t\t\t active: $gray-100,\r\n\t\t\t hover: $gray-100\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Icon\r\n\t\t\t icon:\t(\r\n\t\t\t font-color:\t(\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Bullet\r\n\t\t\t bullet:\t(\r\n\t\t\t dot: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t here: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t ),\r\n\t\t\t line: (\r\n\t\t\t bg-color: (\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t here: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Text\r\n\t\t\t text: (\r\n\t\t\t font-color:\t(\r\n\t\t\t default: $dark-75,\r\n\t\t\t open: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Arrow\r\n\t\t\t arrow:\t(\r\n\t\t\t font-color:\t(\r\n\t\t\t default: $text-muted,\r\n\t\t\t open: $primary,\r\n\t\t\t active: $primary,\r\n\t\t\t hover: $primary\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Section\r\n\t\t\t section: (\r\n\t\t\t text: (\r\n\t\t\t font-color: $dark-50\r\n\t\t\t ),\r\n\r\n\t\t\t icon: (\r\n\t\t\t font-color: $text-muted\r\n\t\t\t )\r\n\t\t\t ),\r\n\r\n\t\t\t // Separator\r\n\t\t\t separator: (\r\n\t\t\t border: 1px solid $gray-200\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t )\r\n\t\t\t)\r\n\t\t)\r\n\t)\r\n) !default;\r\n\r\n// Subheader\r\n$subheader-config: (\r\n\t// Default Mode\r\n\tdefault: (\r\n\t\tbg-color: $white, // Subheader's solid background color\r\n\t\tborder-color: $gray-200, // Subheader's separator border color\r\n\t),\r\n\t// Fixed Subheader Mode\r\n\tfixed: (\r\n\t\theight: 54px, // Fixed subheader's height\r\n\t\tshadow: 0px 10px 30px 0px rgba(82,63,105,0.08), // Fixed subheader's box shadow\r\n\t\tzindex: 95 // Fixed subheader's z-index\r\n\t)\r\n) !default;\r\n\r\n// Footer\r\n$footer-config: (\r\n\t// Fixed Footer Mode\r\n\tfixed: (\r\n\t\tzindex: 97, // Fixed footer's z-index\r\n\t\theight: 60px, // Fixed footer's height\r\n\t\tshadow: 0px 0px 28px 0px rgba(82,63,105,0.13) // Fixed fooer box shadow\r\n\t)\r\n) !default;\r\n\r\n// Offcanvas\r\n$offcanvas-config: (\r\n\twidth: 375px, // Offcanvas panel's width\r\n\tzindex: 1001, // Offcanvas panel's z-index\r\n\tshadow: 0px 1px 9px -3px rgba(0,0,0, 0.25), // Offcanvas panel's box shadow\r\n\tbg-color: #ffffff, // Offcanvas panel's Background color\r\n\toverlay-bg-color: rgba(#000000, 0.1) // Offcanvas panel's overlay background color\r\n) !default;\r\n"],"names":[],"mappings":"AASA,AAAA,OAAO,AAAA,SAAS,AAAC,CAChB,cAAc,CAAE,MAAM,CA4EtB,AA7ED,AAME,OANK,AAAA,SAAS,CAIf,WAAW,CAEV,aAAa,AAAC,CACb,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,QAAQ,CACrB,eAAe,CAAE,aAAa,CAC9B,SAAS,CAAE,IAAI,CAiEf,AA3EH,AAaG,OAbI,AAAA,SAAS,CAIf,WAAW,CAEV,aAAa,CAOZ,YAAY,AAAC,CACZ,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,eAAe,CAAE,MAAM,CACvB,SAAS,CAAE,IAAI,CACf,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAC7B,KAAK,CAAE,mBAAmB,CAC1B,gBAAgB,C6DbE,OAAO,C7DczB,sBAAsB,CAAE,MAAM,CAC9B,uBAAuB,CAAE,MAAM,CAoD/B,AA1EJ,AAwBI,OAxBG,AAAA,SAAS,CAIf,WAAW,CAEV,aAAa,CAOZ,YAAY,CAWX,eAAe,AAAC,CACf,IAAI,CAAE,CAAC,CACP,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,SAAS,CAAE,IAAI,CACf,KAAK,C6DhBY,OAAO,C7DiBxB,OAAO,CAAE,WAAW,CA0BpB,AAxDL,AAgCK,OAhCE,AAAA,SAAS,CAIf,WAAW,CAEV,aAAa,CAOZ,YAAY,CAWX,eAAe,CAQd,cAAc,AAAC,CACd,SAAS,CAAE,MAAM,CACjB,WAAW,CAAE,GAAG,CAChB,IAAI,CAAE,WAAW,CACjB,MAAM,CAAE,OAAO,CACf,KAAK,CAAE,OAAO,CACd,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,eAAe,CAAE,MAAM,CACvB,gBAAgB,C4D1CG,qBAAO,C5D2C1B,KAAK,C4D3Cc,OAAO,C5D4C1B,YAAY,CAAE,IAAI,CAClB,aAAa,CAAE,MAAM,CACrB,AA7CN,AA+CK,OA/CE,AAAA,SAAS,CAIf,WAAW,CAEV,aAAa,CAOZ,YAAY,CAWX,eAAe,CAuBd,aAAa,AAAC,CACb,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CAMtB,AAvDN,AAmDM,OAnDC,AAAA,SAAS,CAIf,WAAW,CAEV,aAAa,CAOZ,YAAY,CAWX,eAAe,CAuBd,aAAa,CAIZ,aAAa,AAAC,CACb,SAAS,CAAE,MAAM,CACjB,WAAW,CAAE,GAAG,CAChB,AAtDP,AA0DI,OA1DG,AAAA,SAAS,CAIf,WAAW,CAEV,aAAa,CAOZ,YAAY,CA6CV,AAAA,iBAAC,CAAkB,SAAS,AAA3B,CAA6B,CAC9B,gBAAgB,C6DvDC,IAAO,C7DqExB,AAzEL,AA8DM,OA9DC,AAAA,SAAS,CAIf,WAAW,CAEV,aAAa,CAOZ,YAAY,CA6CV,AAAA,iBAAC,CAAkB,SAAS,AAA3B,EAGD,eAAe,CACd,cAAc,AAAC,CACd,KAAK,C6D3DU,IAAO,C7D4DtB,gBAAgB,C4DjEE,OAAO,C5DkEzB,AAjEP,AAoEO,OApEA,AAAA,SAAS,CAIf,WAAW,CAEV,aAAa,CAOZ,YAAY,CA6CV,AAAA,iBAAC,CAAkB,SAAS,AAA3B,EAGD,eAAe,CAMd,aAAa,CACZ,aAAa,AAAC,CACb,KAAK,C4DtEY,OAAO,C5DuExB,A8BNJ,MAAM,EAAE,SAAS,EAAE,SAAS,E9BiB/B,AAIG,OAJI,AAAA,SAAS,CAEf,WAAW,CACV,aAAa,CACZ,YAAY,AAAC,CACZ,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAC7B,KAAK,CAAE,mBAAmB,CAC1B,yBAAyB,CAAE,MAAM,CACjC,0BAA0B,CAAE,MAAM,CAClC,aAAa,CAAE,MAAM,CACrB,C8B3BD,MAAM,EAAE,SAAS,EAAE,QAAQ,E9BmC9B,AAGE,OAHK,AAAA,SAAS,CAEf,WAAW,CACV,aAAa,AAAC,CACb,cAAc,CAAE,MAAM,CACtB,WAAW,CAAE,UAAU,CAavB,AAlBH,AAOG,OAPI,AAAA,SAAS,CAEf,WAAW,CACV,aAAa,CAIZ,YAAY,AAAC,CACZ,IAAI,CAAE,QAAQ,CACd,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,IAAI,CAOX,AAjBJ,AAYI,OAZG,AAAA,SAAS,CAEf,WAAW,CACV,aAAa,CAIZ,YAAY,CAKX,eAAe,AAAC,CACf,eAAe,CAAE,UAAU,CAC3B,IAAI,CAAE,QAAQ,CACd,OAAO,CAAE,WAAW,CACpB"} |