/* fonts */
/* standards  //#84202a; #333300; #4d3300;


$mid:                     mix($bar, #ffffff, 18%);//#ddeeff;

$callout:                 mix($bar, $mid, 50%);
$callout-contrast:        contrast-color($callout);
$callout-dark:            mix($bar, $mid, 20%);
$callout-dark-contrast:   contrast-color($callout-dark);
$callout-light:           mix($bar, $mid, 70%);
$callout-light-contrast:  contrast-color($callout-light);
$callout-lighter:         mix($bar, $mid, 85%);
$callout-lighter-contrast:    contrast-color($callout-light);

$callout-rgb:        hex-to-rgb($callout);


$form:                mix($bar, #ffffff, 14%);//#ddeeff;
$form-hover:          mix($bar, #ffffff, 22%);//#ddeeff;
$form-focus:          mix($bar, #ffffff, 25%);//#ddeeff;
$form-error:          mix($bar, #ff0000, 25%);//#ddeeff;
$form-contrast:       contrast-color($form);

$input:               contrast-gradient($bar);

$text:                contrast-color($bar);
$text-rgb:            hex-to-rgb($text);

$mid-rgb:             hex-to-rgb($mid);
$mid-contrast:        contrast-color($mid);
$mid-contrast-rgb:    hex-to-rgb($mid-contrast);

//$bar-rgb:             hex-to-rgb($bar);
//$bar-contrast:        contrast-color($bar);
//$bar-contrast-rgb:    hex-to-rgb($bar-contrast);

//$deepbar:             version($bar, 2%);//darken($bar, 2%);
//$deeperbar:           version($bar, 5%);
//$deepestbar:          version($bar, 10%);

//$main-rgb:            hex-to-rgb($main);
//$main-contrast:       contrast-color($main);
//$main-contrast-rgb:   hex-to-rgb($main-contrast);


/* login 
$bar-login:           #20232a;//#19334d;//  #293d3d;//#19334d;//#20232a;

$bar-login-rgb:       hex-to-rgb($bar-login);
$text-login:          contrast-color($bar-login);
$text-login-rgb:      hex-to-rgb($text-login);

$bar-login-rgb:       hex-to-rgb($bar-login);
$logindeepbar:        darken($bar-login, 2%);
$logindeeperbar:      darken($bar-login, 5%);
$logindeepestbar:     darken($bar-login, 10%);

//$login-input:         contrast-gradient($bar-login);

//$logfield:            rgba(var(--bt),var(--opal-2);
/*$logfield-2:          version($bar-login, 20%);
$logfield-3:          version($bar-login, 30%);
$logfield-4:          version($bar-login, 40%);
$logfield-5:          version($bar-login, 50%);
$logfield-9:          version($bar-login, 90%);*/
/* mid */
/* BOOTSTRAP SELECT */
/* END BOOTSTRAP SELECT */
/* main */
/* preloader */
/* mid */
/* bar colors */
/*form */
/*$field-4:             rgba(var(--t),var(--opacity-4));
$field-5:             version($mid, 50%);
$field-9:             version($mid, 90%);*/
/*:root {
  --bar-base:           $bar;
  --bar-deepest:        $deepestbar;
  --bar-login-deepest:  $logindeepestbar;
  --bar-contrast:       contrast-color($bar);
}*/
/*.is_login {
  --bar-login:                $bar-login;
  --bar-login-contrast:       contrast-color($bar-login);
}*/
/*.login_site {
  --body-back:      $logindeepestbar;
  --body-color:     yellow;
  --pre-back:       rgba(32, 32, 42, 1);
  --pre-color:      rgba(250, 250, 252, 1);
  --pre-color2:     rgba(140, 140, 140, 1);
  --pre-path1:      rgba(25, 25, 35, 1);
  --pre-path2:      $main;
}*/
/*.member_site {
  --body-back:      var(--c1);
  --body-color:     contrast-color($mid);
  --text:           hex-to-rgb(contrast-color($mid));
  --middy:          $mid;
  --middy-contrast: contrast-color($mid);
  --pre-back:       $deepbar;
  --pre-color:      contrast-color($deepbar);
  --pre-color2:     contrast-color($bar);
  --pre-path1:      lighten($bar,10%);
  --pre-path2:      $main;
}*/
/*$color-main: red;
$color-deko: red;
$color-main: red;
$ease: cubic-bezier(0.77, 0, 0.18, 1) !default;
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,  
  xl: 1200px,
  xxl: 1400px
) !default;

// Mixins
*/
/*
$main-color: #FFC107
$main-color: #f44336;
$main-color: #4CAF50;
$main-color: #64B5F6;
*/
/*
$shadow-1: 0 3px 8px 0 rgba(15,15,20,.2);
$shadow-2: 0 1px 4px 0 rgba(15,15,20,.1);

$tr-lg: 0.55s ease-in-out;
$tr-md: 0.4s ease-in-out;
$tr-sm: 0.2s ease-in-out;

$text-neon: 0 0 3px rgba(250,0,252,.4);

$card-color: linear-gradient(159deg, rgba(45,45,58,1) 0%, rgba(43,43,53,1) 100%);
$card-color-light: linear-gradient(159deg, rgba(45,45,58,.98) 0%, rgba(43,43,53,.98) 100%);
$card-color-s-light: linear-gradient(159deg, rgba(45,45,58,.88) 0%, rgba(43,43,53,.88) 100%);

$info-bar-1-color: rgba(32,32,42,1);
$info-bar-1-color-light: rgba(32,32,42,.98);
$info-bar-1-color-s-light: rgba(32,32,42,.88);

$info-bar-2-color: linear-gradient(159deg, rgba(37,37,50,1) 0%, rgba(35,35,45,1) 100%);
$info-bar-2-color-light: linear-gradient(159deg, rgba(37,37,50,.98) 0%, rgba(35,35,45,.98) 100%);
$info-bar-2-color-s-light: linear-gradient(159deg, rgba(37,37,50,.88) 0%, rgba(35,35,45,.88) 100%);

$content-color: rgba(30,30,40,1);
$content-color-light: rgba(30,30,40,.98);
$content-color-s-light: rgba(30,30,40,.88);

$deep-color: rgba(25,25,35,1);
$deep-color-light: rgba(25,25,35,.98);
$deep-color-s-light: rgba(25,25,35,.88);

$text-color-1: rgba(250,250,252,1);
$text-color-2: rgba(140,140,142,1);
$text-color-3: rgba(100,100,102,1);

$top-bg-gradient: linear-gradient(180deg, rgba(30,30,40,.93) 0%, rgba(30,30,40,.96) 70%, rgba(30,30,40,.99) 80%, rgba(30,30,40,1) 100%);

*/
:root {
  --neon:               0 0 3px rgba(250,0,252,.4);
  --fs-sm:              calc(var(--fs) * 1px * 0.9);
  --fs-xs:              calc(var(--fs) * 1px * 0.875);
  --scrollbar-track:    rgba(var(--b),1);
  --scrollbar-back:     rgba(var(--bl),1);
  --scrollbar-width:    2px;
  --scrollbar-thumb:    rgba(var(--bd),1);
  --basesize:           calc(var(--fs) * 1px);
  --basesize-sm:        calc(var(--basesize) * 0.9);
  --basesize-lg:        calc(var(--basesize) * 1.1);
  --h1-size:            calc(var(--basesize) * 1.4);
  --h2-size:            calc(var(--basesize) * 1.3);
  --h3-size:            calc(var(--basesize) * 1.2);
  --h4-size:            calc(var(--basesize) * 1.1);
  --h5-size:            calc(var(--basesize) * 1.05);
  --h6-size:            calc(var(--basesize) * 1);
  /* colors admin */
  --error:              #990000;
  --error-contrast:     #ffffff;
  --danger:             #900;
  --danger-contrast:    #ffffff;
  --success:            #339966;
  --success-contrast:   #ffffff;
  --primary:            #313539;
  --primary-contrast:   #ffffff;
  --secondary:          #888888;
  --secondary-contrast: #ffffff;
  --info:               #BBBBBB;
  --info-contrast:      #ffffff;
  --mark:               #770000;
  --mark-contrast:      #ffffff;
  /* color main */
  --bar:                var(--b);
  --bar-0:              rgba(var(--b),1);
  --bar-1:              rgba(var(--b),var(--opacity-1));
  --bar-2:              rgba(var(--b),var(--opacity-2));
  --bar-3:              rgba(var(--b),var(--opacity-3));
  --bar-4:              rgba(var(--b),var(--opacity-4));
  --bar-5:              rgba(var(--b),var(--opacity-5));
  --bar-6:              rgba(var(--b),0.4);
  --bar-7:              rgba(var(--b),0.3);
  --bar-8:              rgba(var(--b),0.2);
  --bar-9:              rgba(var(--b),0.1);
  --bar-hover:          rgba(var(--b),var(--opacity-9));
  --bar-deep:           rgba(var(--bd),var(--opacity-3));
  --bar-deeper:         rgba(var(--bd),var(--opacity-2));
  --bar-deepest:        var(--bd);
  --bar-contrast-rgb:   var(--bt);
  --bar-contrast:       rgba(var(--bt),1);
  --mid:                rgba(var(--b),0.1);
  --mid-back:           rgba(var(--b),0.1);
  --main-rgb:           var(--m);
  --main:               rgba(var(--m),1);
  --main-contrast-rgb:  var(--mt);
  --main-contrast:      rgba(var(--mt),1);
  --text:               rgba(var(--t),1);
  --text-contrast:      rgba(var(--tc),1);
  --text-0x:            rgba(var(--t),1);
  --text-1x:            rgba(var(--t),var(--opacity-1));
  --text-2x:            rgba(var(--t),var(--opacity-2));
  --text-3x:            rgba(var(--t),var(--opacity-3));
  --text-4x:            rgba(var(--t),var(--opacity-4));
  --text-muted:         rgba(var(--t),var(--opacity-5));
  --label:              rgba(var(--t),1);
  --label-0:            rgba(var(--t),1);
  /* fields / cards */
  /*--field:              hex-to-rgb($field);
    --field-contrast:     hex-to-rgb(contrast-color($field));
    --field-0:            mix($mid, contrast-color($field), 1);
    --field-contrast-1:   contrast-color(mix($mid, contrast-color($field), 95%));
    
    --field-1:            mix($mid, contrast-color($field), 95%);
    --field-contrast-1:   contrast-color(mix($mid, contrast-color($field), 95%));
    --field-2:            $field-2;
    --field-contrast-2:   contrast-color($field-2);
    --field-3:            $field-3;
    --field-contrast-3:   contrast-color($field-3);
    --field-4:            $field-4;
    --field-contrast-4:   contrast-color($field-4);
    --field-5:            $field-5;
    --field-contrast-5:   contrast-color($field-5);
    --field-9:            $field-9;
    --field-contrast-9:   contrast-color($field-9);*/
  --field-radius:       0.5em;
  /* callouts */
  /*--callout-rgb:                $callout-rgb;
    --callout:                    $callout;
    --callout-contrast:           $callout-contrast;
    --callout-dark:               $callout-dark;
    --callout-dark-contrast:      $callout-dark-contrast;
    --callout-light:              $callout-light;
    --callout-light-contrast:     $callout-light-contrast;
    --callout-lighter:            $callout-lighter;
    --callout-lighter-contrast:   $callout-lighter-contrast;*/
  /* forms  */
  --form-back:                  #ebebeb;
  --form-back-hover:            #e0e0e0;
  --form-color:                 rgba(var(--t),1);
  --form-fontsize:              calc(var(--fs) * 1px);
  --form-height:                calc(calc(var(--form-fontsize) * 1.05) + calc(var(--form-fontsize) * 1.5) + calc(var(--form-border) * 2)) !important;
  --form-weight:                bold;
  --form-lineheight:            1.05em;
  --form-padding-y:             0.75em;
  --form-padding-x:             1.5em;
  --form-padding:               var(--form-padding-y) var(--form-padding-x);
  --form-radius:                0px;
  --form-border:                1px;
  --form-border-color:          rgba(var(--t),0.75);
  --form-border-color-hover:    rgba(var(--t),1);
  --form-shadow:                inset var(--wolf-shadow-in);
  --form-dropdown-item-padding-y:   4px;
  --form-dropdown-item-padding-x:   10px;
  /* menu - top / footer */
  --menu-footer-height:70px;
  --menu-top-height:70px;
  /* utilities */
  --box-shadow:                 0 4px 5px rgba(var(--b),.15);
  --inset-shadow:               rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  --padding:                    1.5em;
  --radius:                     0.4em;
  --tool-padding:               1em;
  --tool-margin:                6px;
  --tool-back:                  rgba(var(--b),var(--opacity-2));
  --field-back:                 red;
  --head-image:       350px;
  --head-offset:      25px;
  --opacity-1:        1;
  --opacity-2:        0.85;
  --opacity-3:        0.65;
  --opacity-4:        0.5;
  --opacity-5:        0.3;
  --opacity-9:        0.1;
  --opal-1:        0.025;
  --opal-2:        0.05;
  --opal-3:        0.075;
  --opal-4:        0.1;
  --opal-5:        0.125;
  --opal-9:        0.2;
  /* div */
  --wolf-shadow-in: inset 0 0px 12px 0px rgba(var(--field-contrast),0.075);
  --wolf-shadow-1: 0 3px 8px 0 rgba(15,15,20,.2);
  --wolf-shadow-2: 0 1px 4px 0 rgba(15,15,20,.1);
  --tr-lg: 0.55s ease-in-out;
  --tr-md: 0.4s ease-in-out;
  --tr-sm: 0.2s ease-in-out;
  --bs-backdrop-bg:       var(--bar-3);
  --lineheight: 1.15em;
  --h-lineheight:1.35em;
}
:root {
  --btn-primary: #313539;
  --btn-primary-hover-bg: #2a2d30;
  --btn-primary-active-bg: #25282b;
  --btn-primary-active-color: #ffffff;
  --primary-rgb: 49, 53, 57;
  --btn-secondary: #888888;
  --btn-secondary-hover-bg: #747474;
  --btn-secondary-active-bg: #666;
  --btn-secondary-active-color: #ffffff;
  --secondary-rgb: 136, 136, 136;
  --btn-success: #339966;
  --btn-success-hover-bg: #2b8257;
  --btn-success-active-bg: #26734d;
  --btn-success-active-color: #ffffff;
  --success-rgb: 51, 153, 102;
  --btn-error: #990000;
  --btn-error-hover-bg: #820000;
  --btn-error-active-bg: #730000;
  --btn-error-active-color: #ffffff;
  --error-rgb: 153, 0, 0;
  --btn-danger: #900;
  --btn-danger-hover-bg: #820000;
  --btn-danger-active-bg: #730000;
  --btn-danger-active-color: #ffffff;
  --danger-rgb: 153, 0, 0;
  --btn-info: #BBBBBB;
  --btn-info-hover-bg: #9f9f9f;
  --btn-info-active-bg: #8c8c8c;
  --btn-info-active-color: #000000;
  --info-rgb: 187, 187, 187;
  --btn-white: #FFFFFF;
  --btn-white-hover-bg: #d9d9d9;
  --btn-white-active-bg: #bfbfbf;
  --btn-white-active-color: #000000;
  --white-rgb: 255, 255, 255;
  --btn-black: #000000;
  --btn-black-hover-bg: black;
  --btn-black-active-bg: black;
  --btn-black-active-color: #ffffff;
  --black-rgb: 0, 0, 0;
  --btn-light: #CCCCCC;
  --btn-light-hover-bg: #adadad;
  --btn-light-active-bg: #999;
  --btn-light-active-color: #000000;
  --light-rgb: 204, 204, 204;
  --btn-dark: #333333;
  --btn-dark-hover-bg: #2b2b2b;
  --btn-dark-active-bg: #262626;
  --btn-dark-active-color: #ffffff;
  --dark-rgb: 51, 51, 51;
  --btn-mark: #770000;
  --btn-mark-hover-bg: #650000;
  --btn-mark-active-bg: #590000;
  --btn-mark-active-color: #ffffff;
  --mark-rgb: 119, 0, 0;
  --btn-trans: transparent;
  --btn-trans-hover-bg: rgba(0, 0, 0, 0.15);
  --btn-trans-active-bg: rgba(0, 0, 0, 0.25);
  --btn-trans-active-color: #ffffff;
  --trans-rgb: 0, 0, 0;
}
/*
body.is_login {
  --card:               lighten($bar-login, 5%);
  --field-1:            var(--card);
  --bar-0:              $bar-login;
  --mid:                $bar-login-rgb;
  --mid-back:           $bar-login;             
}*/
/* ----- wolf form ----- */
::placeholder {
  color: rgba(var(--t),var(--opacity-3));
}
::selection {
  background: rgba(var(--b),var(--opacity-5));
  color: rgba(var(--t),1);
}
/* (1) scrollbar */
::-webkit-scrollbar-track {
  -moz-box-shadow: inset 0 0 6px var(--scrollbar-track) !important;
  -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track) !important;
  -ms-box-shadow: inset 0 0 6px var(--scrollbar-track) !important;
  -o-box-shadow: inset 0 0 6px var(--scrollbar-track) !important;
  box-shadow: inset 0 0 6px var(--scrollbar-track) !important;
  -moz-border-radius: 1rem !important;
  -webkit-border-radius: 1rem !important;
  -ms-border-radius: 1rem !important;
  -o-border-radius: 1rem !important;
  border-radius: 1rem !important;
  background-color: var(--scrollbar-back);
}
::-webkit-scrollbar {
  width: 2px;
  background-color: var(--scrollbar-track);
  scrollbar-width: var(--scrollbar-width) !important;
}
::-webkit-scrollbar-thumb {
  -moz-border-radius: 1rem !important;
  -webkit-border-radius: 1rem !important;
  -ms-border-radius: 1rem !important;
  -o-border-radius: 1rem !important;
  border-radius: 1rem !important;
  -moz-box-shadow: inset 0 0 6px var(--scrollbar-track) !important;
  -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track) !important;
  -ms-box-shadow: inset 0 0 6px var(--scrollbar-track) !important;
  -o-box-shadow: inset 0 0 6px var(--scrollbar-track) !important;
  box-shadow: inset 0 0 6px var(--scrollbar-track) !important;
  background-color: var(--scrollbar-back);
}
/* ?????? */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar {
  width: 3px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: var(--scrollbar-thumb);
}