/* fonts */
/* BOOTSTRAP SELECT */
/* END BOOTSTRAP SELECT */
/* main */
/* preloader */
/* mid */
/* bar colors */
/*form */
:root {
  --darkred: #651313;
  --darkblue: #3f3f61;
  --darkgreen: #2a5f2a;
  --main:               rgba(var(--m),1);
  --main-contrast:      rgba(var(--mt),1);
  --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-size:         calc(var(--fs)* 0.85px) !important;
  --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:            rgba(var(--bd),0.9):                //     rgba(var(--bd),0.9);
  --callout-light:      rgba(var(--t),0.5);
  --callout-lighter:    rgba(var(--t),0.25);
  --callout-contrast:   rgba(var(--tc),1);
  /* forms  */
  --form-back:                  rgba(var(--tc),1);
  --form-back-hover:            rgba(var(--t),0.025);
  --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:                600;
  --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:                3px;
  --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);
}