// Colors //
$gray-light: #acb5be !default;
$light-gray: #eeeeee;
$lighter-gray: #dddddd;
$charcoal: #555555;
$darkest-gray: #333333;
$almost-black: #161616;
$hover-black: #222222;
$vue-green: #4ae387;
$vue-light-green: #dbf9e8;
$light-green: #c8f9c5;
$lighter-green: #e9fde8;
$light-blue: #dcf1ff;
$light-yellow: #fff1c8;
$light-pink: #ffcece;
$vue-darkest-blue: #34495e;
$vue-turquoise: #dbf9e7;
$white: #ffffff;
$theme-red: #e34a4a;
$theme-orange: #f7cc36;
$theme-blue: #4ab2e3;
$theme-violet: #db76df;
$theme-pale: #d9d9d9;
$brand-primary: $vue-green !default;
$brand-danger: $theme-red;
$brand-warning: $theme-orange;
$brand-info: $theme-blue;
$brand-success: $vue-green;
$light-gray2: #eff4f5;
$dark-gray: #282828;
$gray: #adb3b9;
$violet: #db76df;
$dark-blue: #0045b6;
$text-gray: #b4b4b4;

$colors-map: (
  brand-danger: $brand-danger,
  brand-primary: $brand-primary,
  brand-info: $brand-info,
  brand-success: $brand-success,
  brand-warning: $brand-warning,
  black: black,
  white: white,
  lighter-gray: $lighter-gray
);

$theme-colors: (
  "primary": $brand-primary,
  "secondary": $white,
  "success": $light-green,
  "info": $brand-info,
  "warning": $brand-warning,
  "danger": $brand-danger,
  "light": $light-gray2,
  "dark": $almost-black,
  "pale": $theme-pale
);

// Layout //
$body-bg: $light-gray;
$top-nav-bg: $darkest-gray;
$body-color: $vue-darkest-blue !default;
$layout-padding: 24px;
$layout-padding-right: 44px;

$top-nav-height: 72px;
$nav-padding-left: $layout-padding;
$nav-padding-right: $layout-padding-right;
$navbar-brand-container-left: 75px;

$sidebar-bg: $darkest-gray;
$sidebar-width: 225px;
$sidebar-top: calc(#{$top-nav-height} + #{$layout-padding});
$sidebar-left: $layout-padding;

$content-wrap-ml: calc(#{$sidebar-left} + #{$sidebar-width} + 35px);
$content-wrap-pr: $layout-padding-right;
$content-wrap-pt: $layout-padding;
$content-wrap-pb: $layout-padding;
$made-by-footer-pb: 27px;

$greeny-box-shadow: 0 4px 9.6px 0.4px rgba($vue-green, .5);

$min-z-index: -1000;

//Auth
$auth-wallpaper-ivuestic-h: 2.625rem;
$auth-wallpaper-oblique-line: $dark-gray;

//Mobile Layout
$top-mobile-nav-height: 6.5rem;
$layout-mobile-padding: 0.1875rem;
$layout-mobile-padding-right: .375rem;

$sidebar-mobile-width: calc(100% - #{$layout-mobile-padding-right});
$sidebar-mobile-top: $top-mobile-nav-height+$layout-mobile-padding;
$sidebar-mobile-left: $layout-mobile-padding;
$content-mobile-wrap-margin: 1.125rem;
$sidebar-mobile-z-index: 1000;

$content-mobile-wrap-pl: 1rem;
$content-mobile-wrap-pr: 1rem;
$content-mobile-wrap-pt: 2rem;
$content-mobile-wrap-pt-fixed-layout: 7rem;
$content-mobile-wrap-pb: $layout-padding;
$content-mobile-wrap: $content-mobile-wrap-pt $content-mobile-wrap-pr $content-mobile-wrap-pb $content-mobile-wrap-pl;
$content-mobile-wrap-fixed-layout: $content-mobile-wrap-pt-fixed-layout $content-mobile-wrap-pr $content-mobile-wrap-pb $content-mobile-wrap-pl;
$content-mobile-wrap-sb-top: calc(#{$top-nav-height} + #{$layout-padding+20}) - 20 px;

$nav-mobile-padding-h: .875rem;
$nav-mobile-pt: 1.75rem;
$nav-mobile-pb: 0.5rem;
$nav-mobile-brand-width: 4rem;
$nav-mobile-brand-top: .875rem;
$nav-mobile-brand-left: calc(50% - #{$nav-mobile-brand-width});

$droppdown-mobile-mp: 1.9375rem;
$dropdown-mobile-show-b: 2rem;

//Auth mobile
$auth-mobile-nav-ivuestic-h: 1.5rem;
$auth-mobile-main-h: calc(100% - #{$top-mobile-nav-height});
$auth-content-padding-t: 2.875rem;

// Typography
// -------------------------

//$text-color:            $gray !default;

$font-family-sans-serif: 'Source Sans Pro', sans-serif !default;

$font-size-root: 16px;

$font-size-base: 1rem !default;
$font-size-larger: 1.2rem;
$font-size-large: 1.5rem;
$font-size-mini: 0.8rem;

$font-weight-bold: 700 !default;
$font-weight-semi-bold: 600 !default;
$font-weight-normal: 400 !default;
$font-weight-thin: 300 !default;
$font-weight-base: $font-weight-thin !default;

$font-size-smaller: 85% !default;

$font-size-h1: 2.625rem !default;
$font-size-h2: 2.25rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.375rem !default;

$headings-line-height: 1 !default;

$blockquote-border-color: $vue-green;
$blockquote-small-color: $gray-light;
$blockquote-border-width: 0.375rem;
$blockquote-font-size: 1.5rem;
//Navbar
$navbar-dd-item-height: 48px;

//Breadcrumbs
$breadcrumbs-height: 54px;
$breadcrumbs-arrow-font: 0.7rem;
$breadcrumbs-arrow-content: "\f054";

//Sidebar
$sidebar-link-height: 64px;
$sidebar-submenu-link-height: 48px;
$sidebar-link-pl: 25px;
$sidebar-submenu-link-pl: 74px;
$sidebar-link-active-bg: $almost-black;
$sidebar-arrow-right: 16px;
$sidebar-menu-item-icon-size: 19px;
$sidebar-viewport-height: calc(100vh - #{$top-nav-height} - #{$content-wrap-pt} - #{$content-wrap-pb});

$sidebar-hidden-top: -150px;
$sidebar-hidden-top-mobile: $sidebar-mobile-top;
$sidebar-hidden-height-mobile: 0;
$sidebar-box-shadow: 0px 8px 14.72px 1.28px rgba(#65a977, 0.3);

//Widgets
$widget-bg: $white;
$widget-padding: 1.5625rem;
$widget-larger-padding: 45px;
$widget-box-shadow: 0px 4px 70px -18px rgba(112, 112, 112, 1);
$widget-danger-shadow: 0px 4px 70px -16px $brand-danger;
$widget-info-shadow: 0px 4px 70px -16px $brand-info;
$widget-viewport-height: $sidebar-viewport-height;
$widget-header-border: 2px solid $light-gray;
$widget-header-height: 55px;
$widget-body-no-header-height: 100%;
$widget-body-with-header-height: calc(100% - #{$widget-header-height});
$widget-mb: 1.875rem;
$info-widget-border: 0.5rem solid $brand-primary;

// Links
$link-color: $brand-primary;
$link-hover-color: lighten($link-color, 10%);
$link-hover-decoration: none;

//Buttons
$input-btn-border-width: 0px;
$btn-line-height: 1.25;
$btn-line-height-sm: $btn-line-height;
$btn-padding-x: 3.9rem;
$btn-padding-y: 1.1rem;
$btn-padding-y-sm: 0.7rem;
$btn-padding-x-sm: 2.5rem;
$btn-padding-y-micro: 0.625rem;
$btn-padding-x-micro: 1.8rem;
$btn-with-icon-text-margin: 1.875rem;
$btn-with-icon-padding-x: 2.8125rem;
$btn-with-icon-rounded-size: 3.5rem;
$btn-with-icon-rounded-size-micro: 2.25rem;
$btn-with-icon-rounded-font-micro: 1.5rem;
$btn-with-icon-rounded-position-top: .4rem;
$btn-with-icon-rounded-position-left: .46rem;
$btn-with-icon-icon-top: .75rem;
$btn-with-icon-rounded-icon-left: 1.23rem;
$btn-with-icon-icon-size: 2rem;
$btn-group-button-padding-x: 1.53rem;
$btn-box-shadow: $greeny-box-shadow;
$btn-box-danger-shadow: 0px 4px 70px -16px $brand-danger;
$btn-box-warning-shadow: 0px 4px 70px -16px $brand-warning;
$btn-box-success-shadow: $greeny-box-shadow;
$btn-box-info-shadow: 0px 4px 70px -16px $brand-info;
$btn-box-pale-shadow: 0px 4px 70px -16px $theme-pale;
$btn-box-dark-shadow: 0px 4px 70px -16px $almost-black;
$btn-border-radius: 1.875rem;
$btn-dark-color: $white;
$btn-dark-bg: $darkest-gray;
$btn-dark-border: $darkest-gray;
$btn-pale-bg: $theme-pale;
$btn-pale-color: $white;
$btn-dd-arrow-size: 1rem;
$btn-border: none;
$btn-secondary-theme-border: 2px solid $brand-primary;

//Dropdowns
$dropdown-link-color: $white;
$dropdown-box-shadow: $greeny-box-shadow;
$dropdown-background: $darkest-gray;
$dropdown-link-color: $white;
$dropdown-link-hover-color: $white;
$dropdown-link-hover-bg: $almost-black;
$dropdown-link-active-color: $white;
$dropdown-link-active-bg: $almost-black;
$dropdown-item-padding-x: 25px;
$dropdown-item-padding-y: 0;
$dropdown-item-height: 40px;
$dropdown-menu-padding-y: 10px;
$dropdown-menu-padding-x: 0;
$dropdown-min-width: 15rem;
$dropdown-simple-visible-items: 4;
$dropdown-multi-visible-items: 4;
$dropdown-show-b: 1.125rem;

//Modals
$modal-header-padding-x: $widget-padding;
$modal-header-padding-y: 0;
$modal-header-height: $widget-header-height;
$modal-header-border: $widget-header-border;
$modal-content-border-width: 0;
$modal-content-border-radius: 0;
$modal-inner-padding: 25px;
$modal-footer-btns-padding-bottom: 20px;
$modal-footer-btns-margin-x: 10px;
$modal-md: 650px;
$modal-lg: 850px;

//Forms
$input-border-color: $lighter-gray;
$input-bg-disabled: $white;

$vuestic-switch-bg: $brand-primary;
$vuestic-switch-padding: 0.313rem 2.375rem;
$vuestic-switch-border-size: 0.125rem;

//Progress Bars
$progress-bar-value-font-size: 0.6875rem;
$progress-bar-circle-diameter: 3.125rem;
$progress-bar-circle-bw: .0678rem;
$progress-bar-circle-overlay-diameter: calc(#{$progress-bar-circle-diameter} - 2 * #{$progress-bar-circle-bw});
$progress-bar-vertical-height: 5.75rem;
$progress-bar-width-thin: .125rem;
$progress-bar-width-basic: .5rem;
$progress-bar-width-thick: 1.5rem;
$vertical-progress-bar-width-thick: 2rem;

//Tables
$table-bg-accent: $white;
$table-border-width: 0;
$table-border-color: #eceeef;
$striped-row-odd: $white;
$striped-row: $light-gray2;
$state-success-bg: #c8fac6;
$state-danger-bg: #ffcece;
$state-warning-bg: #fff1c8;
$state-info-bg: #dcf1ff;
$table-hover-bg: rgba($vue-green, .5);
$table-active-bg: $table-hover-bg;

//Badges
$badge-padding-y: 0.28rem;
$badge-min-width: 5rem;
$badge-font-size: 0.7rem;
$badge-success-bg: $brand-success;
$badge-warning-bg: $theme-orange;
$badge-danger-bg: $theme-red;
$badge-info-bg: $theme-blue;

//Alerts
$alert-padding-x: 1.25rem !default;
$alert-padding-y: .75rem !default;
$alert-margin-bottom: $widget-mb;
$with-close-pr: 3.125rem;

$alert-border-radius: 0;
$alert-border-width: 0;

$alert-success-bg: $light-green;
$alert-success-text: $body-color;
$alert-success-border: transparent;
$alert-success-shadow: 0px 4px 9.6px 0.4px rgba(79, 206, 145, 0.5);

$alert-info-bg: $light-blue;
$alert-info-text: $body-color;
$alert-info-border: transparent;
$alert-info-shadow: 0px 4px 9.6px 0.4px rgba(79, 142, 206, 0.5);

$alert-warning-bg: $light-yellow;
$alert-warning-text: $body-color;
$alert-warning-border: transparent;
$alert-warning-shadow: 0px 4px 9.6px 0.4px rgba(206, 178, 79, 0.5);

$alert-danger-bg: $light-pink;
$alert-danger-text: $body-color;
$alert-danger-border: transparent;
$alert-danger-shadow: 0px 4px 9.6px 0.4px rgba(206, 79, 79, 0.5);

//Icons
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: './fonts/';

//Tabs

$tab-content-pt: 3.125rem;
$tab-content-pb: 1.5rem;

//PreLoader
$vuestic-preloader-left: calc(50% - 140px / 2);
$vuestic-preloader-top: calc(50% - 104px / 2);

//Medium Editor
$medium-editor-button-size: $btn-padding-y * 2 + $font-size-base * $btn-line-height;

//tooltips

$tooltip-font-size: $font-size-base;
$tooltip-box-shadow: $greeny-box-shadow;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $darkest-gray;
$tooltip-border-radius: $font-size-base * 0.5;
$tooltip-opacity: .9;
$tooltip-padding-y: .5rem;
$tooltip-padding-x: .75rem;
$tooltip-margin: 0;
$tooltip-line-height: 1.13;
$tooltip-font-weight: 300;

$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;

// Popovers

$popover-font-size: $font-size-base;
$popover-line-height: $tooltip-line-height;
$popover-box-shadow: $tooltip-box-shadow;
$popover-bg: $tooltip-bg;
$popover-max-width: 400px;
$popover-border-width: 0;
$popover-border-color: transparent;
$popover-border-radius: $tooltip-border-radius;
$popover-box-shadow: $greeny-box-shadow;
$popover-opacity: $tooltip-opacity;

$popover-header-bg: $tooltip-bg;
$popover-header-color: $white;
$popover-header-padding-y: 0;
$popover-header-padding-x: .75rem;
$popover-header-no-icon-padding-x: 0;
$popover-header-font-weight: bold;

$popover-body-color: $white;
$popover-body-padding-y: $popover-header-padding-y;
$popover-body-padding-x: $popover-header-padding-x;
$popover-body-no-icon-padding-x: $popover-header-no-icon-padding-x;

$popover-icon-size: 1.35rem;
$popover-icon-color: $brand-primary;

$popover-arrow-width: 1rem;
$popover-arrow-height: 1rem;
$popover-arrow-color: transparent;

$popover-arrow-outer-color: fade-in($popover-border-color, .05);

// Toasts

$toast-font-size: $popover-font-size;
$toast-line-height: $popover-line-height;
$toast-font-weight: normal;
$toast-min-height: 3.25rem;
$toast-box-shadow: $popover-box-shadow;
$toast-bg: $popover-bg;
$toast-border-radius: $popover-border-radius;
$toast-color: $popover-body-color;
$toast-opacity: $popover-opacity;

$toast-padding-x: 1.15rem;
$toast-padding-y: 0.5rem;

$toast-icon-size: $popover-icon-size;
$toast-icon-color: $popover-icon-color;
$toast-icon-ml: 0;
$toast-icon-mr: 0.625rem;