/* ------------------------------------------------------------------------------
 *
 *  # Additional variables
 *
 *  Mainly 3rd party libraries and additional variables for default
 *  Bootstrap components.
 *
 * ---------------------------------------------------------------------------- */


//
// Content styling
//
// Various custom variables for text, icons, elements, blocks etc

// Custom scrollbars on Windows
$cs-size:                                 0.4rem;
$cs-thumb-color:                          $gray-600;
$cs-track-color:                          $gray-300;

// Content divider
$content-divider-height:                  $border-width !default;
$content-divider-color:                   $border-color !default;

// Shadows used in :hover/:focus states
$hover-shadow-lighter:                    0 0 0 62.5rem rgba($black, 0.01) inset !default;
$hover-shadow-darker:                     0 0 0 62.5rem rgba($black, 0.04) inset !default;

// Images
$img-path:                                '../../../../../../global_assets/images' !default;
$img-preview-max-height:                  5rem !default;

// Wrappers for element spacers. Uses default $spacers map
$element-spacer-x-sm:                     map-get($spacers, 1) !default;
$element-spacer-x:                        map-get($spacers, 2) !default;
$element-spacer-x-lg:                     map-get($spacers, 3) !default;

// Header elements
$header-elements-padding-y:               $spacer !default;
$header-elements-padding-x:               $grid-gutter-width !default;

// Icons
$list-icons-spacer:                       map-get($spacers, 2) !default;

$icon-caret-up:                           '\e9c2' !default;
$icon-caret-down:                         '\e9c1' !default;
$icon-caret-left:                         '\e9c0' !default;
$icon-caret-right:                        '\e9c3' !default;

$icon-alert-styled-base:                  '\e9a2' !default;
$icon-alert-styled-danger:                '\ed64' !default;
$icon-alert-styled-success:               '\ed6e' !default;
$icon-alert-styled-warning:               '\e9bd' !default;
$icon-alert-styled-info:                  '\e9b9' !default;
$icon-alert-styled-custom:                '\e81b' !default;

$icon-validation-error:                   '\ed63' !default;
$icon-validation-success:                 '\ee73' !default;

$icon-notification-sticker:               '\ee70' !default;
$icon-notification-stuck:                 '\ee75' !default;

$icon-table-row-expand:                   '\e9e4' !default;
$icon-table-row-collapse:                 '\e9e7' !default;
$icon-table-sorting-up:                   '\e9c2' !default;
$icon-table-sorting-down:                 '\e9c1' !default;
$icon-table-button-confirm:               '\ed6e' !default;

$icon-menu-arrow-down:                    $icon-caret-down !default;
$icon-menu-sub-arrow-ltr:                 '\e9c3' !default;
$icon-menu-sub-arrow-rtl:                 '\e9c0' !default;
$icon-menu-slinky-back-ltr:               '\ede7' !default;
$icon-menu-slinky-back-rtl:               '\ede5' !default;

$icon-nav-prev:                           '\e9c8' !default;
$icon-nav-next:                           '\e9cb' !default;
$icon-nav-calendar-prev:                  '\e9c0' !default;
$icon-nav-calendar-next:                  '\e9c3' !default;

$icon-indicator-expand:                   $icon-caret-down !default;
$icon-indicator-collapse:                 $icon-caret-right !default;

$icon-spinner-up:                         $icon-caret-up !default;
$icon-spinner-down:                       $icon-caret-down !default;

$icon-uploader-placeholder:               '\ea0e' !default;
$icon-uploader-placeholder-actions:       '\ec67' !default;

$icon-action-cross:                       '\ed6a' !default;
$icon-action-cross-sm:                    '\ed6b' !default;

$icon-fancytree-file:                     '\ea1a' !default;
$icon-fancytree-sub-collapse:             '\ea0f' !default;
$icon-fancytree-sub-expand:               '\ea11' !default;
$icon-fancytree-folder:                   '\ea3d' !default;
$icon-fancytree-folder-collapse:          '\ea41' !default;
$icon-fancytree-folder-expand:            '\ea43' !default;

$icon-card-collapse:                      '\e9b8' !default;
$icon-card-expand:                        '\e9b7' !default;
$icon-card-action-collapse:               $icon-caret-down !default;
$icon-card-action-reload:                 '\e9fb' !default;
$icon-card-action-remove:                 '\ed6a' !default;
$icon-card-action-move:                   '\e986' !default;
$icon-card-action-full-base:              '\e9f9' !default;
$icon-card-action-full-active:            '\e9fa' !default;
$icon-card-action-modal:                  '\e9eb' !default;

$icon-wizard-step-current:                '\e913' !default;
$icon-wizard-step-complete:               '\ed6f' !default;

$icon-picker-color-clear:                 '\ee6e' !default;
$icon-checkbox-tick:                      '\e600' !default;
$icon-search-magnifier:                   '\e98e' !default;
$icon-loading-spinner:                    '\eb51' !default;
$icon-list-dot:                           '\f052' !default;

// Transition timers
$component-transition-timer:              0.15s !default;
$component-transition-delay:              0.15s !default;

// Enhanced media objects
$media-title-margin-bottom:               0.125rem !default;
$media-link-hover-bg:                     rgba($black, 0.04) !default;
$media-padding-x:                         1.25rem !default;
$media-padding-y:                         1rem !default;
$media-border-width:                      $border-width !default;
$media-border-color:                      $border-color !default;

// Enhanced dropdown menus
$dropdown-content-header-padding-y:       1rem !default;
$dropdown-content-body-padding-y:         1.25rem !default;
$dropdown-content-body-padding-x:         1.25rem !default;
$dropdown-content-footer-padding-y:       0.75rem !default;
$dropdown-content-footer-border-width:    $border-width !default;
$dropdown-content-footer-border-color:    $border-color !default;

// Perfect scrollbar
$ps-size:                                 0.25rem !default;
$ps-gap:                                  0.125rem !default;
$ps-bg:                                   $gray-600 !default;
$ps-opacity:                              0.75 !default;

// jQuery UI
$ui-accordion-spacer-y:                   0.5rem !default;
$ui-autocomplete-height:                  250px !default;
$ui-datepicker-width:                     270px !default;

// Charts
$chart-container-height:                  400px !default;
$chart-min-width:                         37.5rem !default;
$chart-pie-min-width:                     31.25rem !default;

$chart-text-color:						  $body-color !default;
$chart-line-color:						  $gray-600 !default;
$chart-axis-line-color:					  $gray-600 !default;
$chart-axis-text-color:					  $body-color !default;
$chart-grid-color-primary:				  $gray-400 !default;
$chart-grid-color-secondary:			  $gray-900 !default;
$chart-empty-bg:						  $gray-300 !default;

$c3-region-bg:							  $gray-500 !default;
$c3-region-opacity:						  1 !default;
$c3-tooltip-border-color:			  	  rgba($white, 0.1) !default;

// Maps
$map-container-height:                    500px !default;
$map-container-sidebar-height:            200px !default;

$map-btn-zoom-bg:						  $gray-900 !default;
$map-btn-zoom-color:					  $white !default;
$map-btn-zoom-hover-bg:					  $gray-800 !default;
$map-btn-zoom-hover-color:				  $map-btn-zoom-color !default;

// Misc
$select-custom-width:                     220px !default;
$cursor-disabled:                         default !default;
$drag-placeholder-bg:					  rgba($white, 0.8) !default;



//
// Page header
//
// Includes page header base, colors and page title

$page-header-padding-y:                      2rem !default;
$page-header-padding-x:                      $grid-gutter-width !default;

$page-header-box-shadow:					 $shadow-depth1 !default;

$page-header-light-bg:                       $white !default;
$page-header-dark-bg:                        #273246 !default;
$page-header-dark-color:                     $white !default;



//
// Content area
//
// Area below page header, Also includes boxed layout

$page-container-padding-x:       8.75rem;

$content-container-padding-y:    $spacer !default;
$content-container-padding-x:    ($grid-gutter-width / 2) !default;

$boxed-bg:                       url(#{$img-path}/backgrounds/boxed_bg.png) repeat !default;
$boxed-container-box-shadow:     -4px 2px 4px rgba($black, 0.15), 4px 2px 4px rgba($black, 0.15) !default;



//
// Sidebar
//
// Includes sidebar sizes, colors and user areas

// Base
$sidebar-base-width:                     rem-calc(300px) !default;
$sidebar-mini-width:                     ($spacer * 2) + $icon-font-size !default;

// Section body
$sidebar-section-body-padding-x:		 1.25rem !default;
$sidebar-section-body-padding-y:		 1.25rem !default;

// Section header
$sidebar-section-header-padding-x:		 $sidebar-section-body-padding-x !default;
$sidebar-section-header-padding-y:		 0.75rem !default;

// Light sidebar
$sidebar-light-bg:                       $white !default;
$sidebar-light-color:                    $body-color !default;
$sidebar-light-border-color:             rgba($black, 0.125) !default;
$sidebar-light-tabs-bg:                  darken($sidebar-light-bg, 4%) !default;

// Dark sidebar
$sidebar-dark-bg:                        $dark !default;
$sidebar-dark-color:                     $white !default;
$sidebar-dark-border-color:              rgba($white, 0.1) !default;
$sidebar-dark-tabs-bg:                   darken($sidebar-dark-bg, 4%) !default;

// Shadows
$sidebar-left-desktop-box-shadow:        $shadow-depth1 !default;
$sidebar-left-mobile-box-shadow:         0.25rem 0 1rem rgba(0, 0, 0, 0.35) !default;

$sidebar-right-desktop-box-shadow:       $shadow-depth1 !default;
$sidebar-right-mobile-box-shadow:        -0.25rem 0 1rem rgba(0, 0, 0, 0.35) !default;

// Z-indexes
$sidebar-zindex:                         ($zindex-fixed + 8) !default;
$sidebar-zindex-main:                    99 !default;
$sidebar-zindex-secondary:               ($sidebar-zindex-main - 1) !default;
$sidebar-zindex-right:                   ($sidebar-zindex-main - 2) !default;
$sidebar-zindex-component:               ($sidebar-zindex-main - 3) !default;



//
// Main vertical navigation
//
// Includes base styles, levels and colors

$navigation-padding-y:                      0.5rem !default;

$navigation-item-padding-y:                 0.75rem !default;
$navigation-item-padding-x:                 1.25rem !default;
$navigation-item-spacer-y:                  1px !default;
$navigation-item-font-weight:               $font-weight-semibold !default;
$navigation-item-disabled-opacity:          0.5 !default;

$navigation-sub-padding-y:                  0.625rem !default;
$navigation-sub-item-opacity:               0.5 !default;


// Dark sidebar navigation styles
$navigation-dark-color:                     rgba($sidebar-dark-color, 0.9) !default;
$navigation-dark-hover-bg:                  rgba($white, 0.1) !default;
$navigation-dark-hover-color:               $sidebar-dark-color !default;
$navigation-dark-active-bg:                 $light-100 !default;
$navigation-dark-active-color:              $white !default;
$navigation-dark-sub-bg:                    rgba($black, 0.15) !default;
$navigation-dark-sub-active-bg:             $navigation-dark-active-bg !default;
$navigation-dark-sub-active-color:          $navigation-dark-active-color !default;
$navigation-dark-bordered-border-width:     $border-width !default;
$navigation-dark-bordered-border-color:     rgba($white, 0.1) !default;
$navigation-dark-bordered-header-bg:        rgba($black, 0.1) !default;


// Light sidebar navigation styles
$navigation-light-color:                    rgba($sidebar-light-color, 0.85) !default;
$navigation-light-hover-bg:                 $gray-300 !default;
$navigation-light-hover-color:              $sidebar-light-color !default;
$navigation-light-active-bg:                $gray-400 !default;
$navigation-light-active-color:             $sidebar-light-color !default;
$navigation-light-sub-bg:                   transparent !default;
$navigation-light-sub-active-bg:            $gray-400 !default;
$navigation-light-sub-active-color:         $body-color !default;
$navigation-light-bordered-border-width:    $border-width !default;
$navigation-light-bordered-border-color:    $gray-400 !default;
$navigation-light-bordered-header-bg:       $gray-100 !default;


//
// Form components
//
// Form checks, switches, selects, tags etc.

// Select2 selects
$select2-max-height:                 280px !default;
$select2-disabled-opacity:           0.6 !default;
$select2-custom-disabled-opacity:    0.75 !default;

$select2-pills-spacer:               0.125rem;
$select2-pills-bg:                   $gray-300 !default;
$select2-pills-color:                $body-color !default;
$select2-pills-hover-bg:             $indigo-500 !default;
$select2-pills-hover-color:          $white !default;
$select2-pills-border-radius:        $rounded-pill;

$select2-light-results-color:        $gray-600 !default;
$select2-dark-results-color:         rgba($white, 0.75) !default;


// Multiselect
$multiselect-max-height:             280px !default;
$multiselect-font-weight:            $font-weight-normal !default;
$multiselect-text-transform:         none !default;


// Typeahead
$typeahead-max-height:               350px !default;
$typeahead-max-height-scrollable:    250px !default;


// Tag inputs
$tags-spacer:                        0.125rem !default;
$tags-color:                         $body-color !default;
$tags-hover-color:                   $white !default;
$tags-bg:                            $gray-400 !default;
$tags-hover-bg:                      $indigo-500 !default;
$tag-disabled-opacity:               0.5 !default;
$tag-border-radius:                  $input-border-radius !default;


// Form wizard
$wizard-step-line-size:              2px !default;
$wizard-step-line-color:             $gray-300 !default;

$wizard-step-number-size:            rem-calc(38px) !default;
$wizard-step-number-bg:              $card-bg !default;
$wizard-step-number-color:           $gray-500 !default;
$wizard-step-number-active-bg:       $cyan-500 !default;
$wizard-step-number-active-color:    $white !default;
$wizard-step-number-error-bg:        $red-500 !default;



//
// Text editors
//
// Summernote, trumbowyg, ace code editor

// Summernote editor
$summernote-border-width:            $border-width !default;
$summernote-border-color:            $border-color !default;
$summernote-font-path:               "../../../../../../global_assets/css/icons/summernote/" !default;
$summernote-icon-font-size:          0.875rem !default;
$summernote-min-height:              rem-calc(150px) !default;
$summernote-toolbar-bg:				 $card-bg !default;

$summernote-resizer-width:           1.25rem !default;
$summernote-resizer-height:          $border-width !default;
$summernote-resizer-color:           $border-color !default;


// Trumbowyg editor
$trumbowyg-min-height:               350px !default;

$trumbowyg-border-width:             $border-width !default;
$trumbowyg-border-color:             $border-color !default;

$trumbowyg-toolbar-bg:               $gray-100 !default;
$trumbowyg-toolbar-hover-bg:         $gray-300 !default;
$trumbowyg-toolbar-color:            $body-color !default;
$trumbowyg-toolbar-border-width:     $border-width !default;
$trumbowyg-toolbar-border-color:     $border-color !default;
$trumbowyg-toolbar-divider-width:    0 !default;
$trumbowyg-toolbar-height:           ($btn-padding-x * 2) + $icon-font-size + rem-calc($trumbowyg-toolbar-border-width * 2) !default;


// CKEditor
$cke-toolbar-bg:					 $card-bg !default;
$cke-float-toolbar-bg:				 $cke-toolbar-bg !default;
$cke-resizer-size:					 ($border-width * 8) !default;


// Ace code editor
$ace-height:                         450px !default;



//
// Pickers
//
// Date, time and color pickers

// Common styles for date pickers
$datepicker-padding:                0.9375rem !default;
$datepicker-title-font-size:        $h6-font-size !default;

$datepicker-item-padding:           $input-btn-padding-y !default;
$datepicker-item-weekday-color:     $gray-600 !default;
$datepicker-item-year-color:        $gray-600 !default;
$datepicker-item-focusout-color:    $gray-500 !default;
$datepicker-item-hover-color:       $body-color !default;
$datepicker-item-hover-bg:          $gray-300 !default;
$datepicker-item-active-color:      $white !default;
$datepicker-item-active-bg:         $teal-500 !default;
$datepicker-item-today-color:       $body-color !default;
$datepicker-item-today-bg:          $gray-200 !default;
$datepicker-item-disabled-color:    $gray-600 !default;
$datepicker-item-disabled-bg:       transparent !default;


// Pick-a-date picker
$pickadate-min-width:				18rem !default;
$pickadate-max-width:               20rem !default;
$pickadate-max-height:              480px !default;


// Pick-a-time picker
$pickatime-max-height:              250px !default;
$pickatime-min-width:               16rem !default;
$pickatime-max-width:               20rem !default;


// Spectrum color picker
$spectrum-padding:                  0.625rem !default;
$spectrum-width:                    13.75rem !default;
$spectrum-max-width:                13.75rem !default;

$spectrum-choose-btn-bg:            $slate-500 !default;
$spectrum-choose-btn-color:         $white !default;



//
// File uploaders
//
// Plupload, Bootstrap file input and dropzone

// Plupload uploader
$plupload-max-height:                       250px !default;
$plupload-bg:                               $card-bg !default;
$plupload-border-width:                     ($border-width * 2) !default;
$plupload-border-style:                     dashed !default;
$plupload-border-color:                     $gray-400 !default;

$plupload-header-bg:                        $slate-800 !default;
$plupload-header-color:                     $white !default;

$plupload-placeholder-icon-color:           $gray-500 !default;
$plupload-placeholder-text-color:           $gray-700 !default;

$plupload-btn-start-bg:                     $blue-500 !default;
$plupload-btn-start-border-color:           $plupload-btn-start-bg !default;
$plupload-btn-start-color:                  $white !default;


// Bootstrap file input
$fileinput-preview-spacer:                  0.5rem !default;
$fileinput-preview-thumb-width:             10rem !default;
$fileinput-preview-thumb-height:            10rem !default;
$fileinput-preview-thumb-caption-spacer:    0.75rem !default;
$fileinput-preview-footer-bg:               $gray-100 !default;
$fileinput-preview-progress-height:         0.375rem !default;
$fileinput-preview-frame-bg:                $card-bg !default;
$fileinput-preview-frame-border-width:      $border-width !default;
$fileinput-preview-frame-border-color:      $border-color !default;


// Dropzone
$dropzone-min-height:                       18rem !default;
$dropzone-spacer:                           0.3125rem !default;

$dropzone-bg:                               $card-bg !default;
$dropzone-border-width:                     ($border-width * 2) !default;
$dropzone-border-style:                     dashed !default;
$dropzone-border-color:                     $gray-400 !default;

$dropzone-placeholder-icon-size:            ($icon-font-size * 4) !default;
$dropzone-placeholder-icon-color:           $gray-500 !default;
$dropzone-placeholder-text-color:           $gray-700 !default;

$dropzone-drag-bg:                          $gray-200 !default;
$dropzone-drag-color:                       $gray-400 !default;
$dropzone-drag-border-color:                $gray-600 !default;

$dropzone-preview-spacer:                   0.5rem !default;
$dropzone-preview-width:                    10rem !default;



//
// Notifications
//
// Sweet alert and noty.js notification libraries

// Common styles
$notification-width:                   20rem !default;
$notification-gutter-y:                $spacer !default;
$notification-gutter-x:                $content-container-padding-x !default;
$notification-box-shadow:              $shadow-depth1 !default;


// Noty.js
$noty-spacer-y:                        0.25rem !default;

$notification-alert-bg:                $dark !default;
$notification-alert-color:             $white !default;
$notification-alert-border-color:      $notification-alert-bg !default;

$notification-warning-bg:              $orange-500 !default;
$notification-warning-color:           $white !default;
$notification-warning-border-color:    $notification-warning-bg !default;

$notification-error-bg:                $red-500 !default;
$notification-error-color:             $white !default;
$notification-error-border-color:      $notification-error-bg !default;

$notification-info-bg:                 $blue-500 !default;
$notification-info-color:              $white !default;
$notification-info-border-color:       $notification-info-bg !default;

$notification-success-bg:              $green-500 !default;
$notification-success-color:           $white !default;
$notification-success-border-color:    $notification-success-bg !default;

$noty-progress-height:                 0.1875rem !default;
$noty-progress-bg:                     rgba($black, 0.25) !default;


// Sweet alert 2
$swal-padding:                         1.25rem !default;
$swal-width:                           31.25rem !default;
$swal-margin-x:                        $content-container-padding-x !default;

$swal2-icon-size:                      5rem !default;
$swal2-icon-border-width:              0.25rem !default;
$swal2-icon-spacer:                    1rem !default;

$swal2-toast-icon-size:                1.75rem !default;
$swal2-toast-icon-border-width:        0.125rem !default;
$swal2-toast-icon-spacer:              0.5rem !default;

$swal2-step-inactive-color:            $text-muted !default;
$swal2-step-active-color:              $blue-500 !default;
$swal2-step-complete-color:            $swal2-step-active-color !default;
$swal2-step-line-color:                $gray-500 !default;

$swal2-error-color:                    $red-500 !default;
$swal2-error-border-color:             $swal2-error-color !default;

$swal2-warning-color:                  $red-500 !default;
$swal2-warning-border-color:           $swal2-warning-color !default;

$swal2-info-color:                     $blue-500 !default;
$swal2-info-border-color:              $swal2-info-color !default;

$swal2-question-color:                 $slate-500 !default;
$swal2-question-border-color:          $swal2-question-color !default;

$swal2-success-color:                  $green-500 !default;
$swal2-success-border-color:           $swal2-success-color !default;

$swal2-steps-distance: 				   2.5em !default;
$swal2-steps-line-size: 			   ($border-width * 2) !default;
$swal2-step-padding-y: 				   $pagination-padding-y !default;
$swal2-step-padding-x: 				   $pagination-padding-x !default;
$swal2-step-background: 			   $light !default;
$swal2-step-color: 					   $body-color !default;
$swal2-active-step-background: 		   $blue-500 !default;
$swal2-active-step-color: 			   $white !default;



//
// Tables
//
// Datatables and footable libraries

// Datatables
$dt-spacer-y:                        $spacer !default;
$dt-spacer-x:                        $card-spacer-x !default;
$dt-filter-width:                    12.5rem !default;
$dt-controls-label-spacer-y:         ($input-padding-y + rem-calc($input-border-width)) !default;
$dt-controls-label-spacer-x:         ($dt-spacer-x / 1.5) !default;

$dt-pagination-active-bg:            $slate-800 !default;
$dt-pagination-active-color:         $white !default;

$dt-button-collection-2col-width:    18.75rem !default;
$dt-button-collection-3col-width:    28.13rem !default;
$dt-button-collection-4col-width:    37.5rem !default;

$dt-ext-select-active-row-bg:        $green-100 !default;


// Footable
$ft-inner-list-bg:					 $gray-100 !default;



//
// Misc components
//
// Other custom 3rd party extensions and libraries

// FAB (floating action button)
$fab-main-btn-size:                    (($btn-float-padding + ($icon-font-size / 2)) * 2) !default;
$fab-btn-gap:                          0.125rem !default;
$fab-gutter-x:                         $content-container-padding-x !default;

$fab-inner-btn-size:                   (($btn-float-padding - $fab-btn-gap) * 2) + $icon-font-size !default;
$fab-inner-btn-spacing:                $spacer !default;

$fab-badge-spacer-x:                   0.25rem !default;
$fab-badge-spacer-y:                   $fab-badge-spacer-x !default;

$fab-label-light-bg:                   $white !default;
$fab-label-light-color:                $body-color !default;


// Fullcalendar
$fullcalendar-bg:                      $card-bg !default;

$fullcalendar-event-bg:                $primary !default;
$fullcalendar-event-color:             $white !default;
$fullcalendar-event-border-width:      $border-width !default;
$fullcalendar-event-border-color:      $fullcalendar-event-bg !default;

$fullcalendar-event-spacer-y:          0.1875rem !default;
$fullcalendar-event-spacer-x:          0.5rem !default;
$fullcalendar-event-padding-y:         0.1875rem !default;
$fullcalendar-event-padding-x:         0.5rem !default;

$fullcalendar-event-more-bg:           $gray-300 !default;
$fullcalendar-event-more-hover-bg:	   $gray-500 !default;

$fullcalendar-event-resizer-size-h:    0.5rem !default;
$fullcalendar-event-resizer-size-v:    0.5rem !default;

$fullcalendar-today-bg:                $green-100 !default;
$fullcalendar-bgevent-bg:              rgba($green-300, 0.3) !default;
$fullcalendar-nonbusiness-bg:          rgba($gray-400, 0.3) !default;
$fullcalendar-highlight-bg:            rgba($gray-400, 0.2) !default;
$fullcalendar-weekday-bg:              $gray-100 !default;
$fullcalendar-weekday-color:           $body-color !default;


// Sliders (shared styles)
$slider-bg:                            $gray-300 !default;
$slider-connect-bg:                    $indigo-500 !default;
$slider-disabled-opacity:              0.75 !default;
$slider-box-shadow:                    inset 0 1px 1px rgba($black, 0.1) !default;

$slider-height:                        0.3125rem !default;
$slider-height-lg:                     ($slider-height + 0.125rem) !default;
$slider-height-sm:                     ($slider-height - 0.125rem) !default;
$slider-vertical-height:               10rem !default;

$slider-handle-bg:                     $slider-connect-bg !default;
$slider-handle-inner-bg:               $slider-connect-bg !default;
$slider-handle-border-width:           $border-width !default;
$slider-handle-border-color:           transparent !default;
$slider-handle-hover-bg:               $slider-handle-bg !default;
$slider-handle-inner-hover-bg:         $slider-handle-hover-bg !default;

$slider-pips-color:                    $gray-700 !default;
$slider-pips-spacer-y:                 1rem !default;
$slider-pips-spacer-x:                 1rem !default;
$slider-pips-marker-width:             0.0625rem !default;
$slider-pips-marker-height:            0.1875rem !default;
$slider-pips-font-size:                $font-size-xs !default;
$slider-pips-line-height:              $line-height-xs !default;


// Image cropper
$cropper-grid-size:                    $border-width !default;
$cropper-grid-color:                   $gray-300 !default;
$cropper-grid-center-size:             ($border-width * 9) !default;

$cropper-resizer-color:                $blue-500 !default;
$cropper-resizer-size:                 0.375rem !default;
$cropper-resizer-size-lg:              1.25rem !default;


// Fancybox
$fancybox-nav-spacer-x:                0.625rem !default;
$fancybox-nav-spacer-y:                $fancybox-nav-spacer-x !default;
$fancybox-nav-padding:                 0.375rem !default;
$fancybox-nav-bg:                      rgba($black, 0.5) !default;
$fancybox-nav-color:                   $white !default;
$fancybox-nav-hover-bg:                $gray-900 !default;
$fancybox-nav-hover-color:             $fancybox-nav-color !default;

$fancybox-caption-padding-y:           0.5rem !default;
$fancybox-caption-padding-x:           0.625rem !default;
$fancybox-caption-bg:                  rgba($black, 0.5) !default;
$fancybox-caption-color:               $white !default;


// Fancytree
$fancytree-node-padding-y:             0.25rem !default;
$fancytree-node-padding-x:             0.5rem !default;

$fancytree-node-selected-bg:           $gray-300 !default;
$fancytree-node-selected-color:        $body-color !default;

$fancytree-node-active-bg:             $blue-100 !default;
$fancytree-node-active-color:          $body-color !default;



//
// Page kits
//
// Feeds, timelines, profiles, chats, inbox, ecommerce etc
//

// Timelines
$timeline-icon-size: 				  3rem !default;
$timeline-line-width: 				  ($border-width * 2) !default;
$timeline-line-color: 				  $gray-500 !default;
$timeline-icon-bg:					  $card-bg !default;
$timeline-icon-border-width: 		  ($timeline-line-width * 2) !default;
$timeline-content-padding-x:          ($content-container-padding-x * 2) !default;


// Feeds
$list-feed-circle-radius: 			  0.5rem !default; // must be equal to even px value
$list-feed-circle-border-width: 	  ($border-width * 2) !default;
$list-feed-circle-border-color:		  $slate-500 !default;
$list-feed-circle-position: 		  ($line-height-computed - ($list-feed-circle-radius + rem-calc($list-feed-circle-border-width))) / 2 !default;

$list-feed-item-padding-y:			  1.25rem !default;
$list-feed-item-padding-x:			  ($card-spacer-x + $list-feed-circle-radius) !default;


// Blog
$blog-horizontal-img-max-width:       25rem !default;
$blog-horizontal-img-max-width-lg:    31.25rem !default;
$blog-horizontal-img-max-width-sm:    18.75rem !default;
$blog-horizontal-img-max-width-xs:    12.5rem !default;


// Login page
$login-form-width:                    20rem !default;


// Error pages
$error-title-color:                   $white !default;
$error-title-font-size:               12.5rem !default;
$error-title-font-size-sm:            8.125rem !default;

$error-offline-title-font-size:       10rem !default;
$error-offline-title-font-size-sm:    6.875rem !default;


// Profile pages
$profile-cover-element-shadow:        0 0 0.1875rem rgba($black, 0.5) !default;
$profile-thumb-size:                  6.25rem !default;
$profile-thumb-border-width:          ($border-width * 3) !default;
$profile-thumb-border-color:          $white !default;
$profile-cover-height:                21.88rem !default;


// Inbox
$inbox-read-row-bg:                   $gray-100 !default;
$inbox-unread-row-bg:                 $card-bg !default;


// Chats
$chat-list-max-height:                520px !default;
$chat-message-arrow-size:             ($border-width * 5) !default;
$chat-message-border-radius:          $border-radius !default;
$chat-message-padding-y:              0.625rem !default;
$chat-message-padding-x:              1rem !default;

$chat-message-bg:                     $gray-300 !default;
$chat-message-color:                  $body-color !default;
$chat-message-reversed-bg:            $blue-500 !default;
$chat-message-reversed-color:         $white !default;


// Pricing tables
$pricing-title-font-size:             2.625rem !default;
$pricing-subtitle-font-size:          1.875rem !default;

$pricing-list-item-padding-y:         1rem !default;
$pricing-list-item-border-width:      $border-width !default;
$pricing-list-item-border-color:      rgba($black, 0.1) !default;

$pricing-ribbon-box-shadow:           0 4px 6px rgba($black, 0.1) !default;