/*
    $voc-navy-blue: #0f3055;
    $voc-broadcast-blue: #0e1622;
    $voc-blue:#142640;
    $voc-medium-blue:#456580;
    $voc-light-blue:#dae8ef;
    $base-color: $voc-broadcast-blue; 

    $primary0: #ebf0f7; lighten($voc-broadcast-blue, 85%);          //#6aa7eb;
    $primary1: #90aad1; lighten($voc-broadcast-blue, 60%); 			//#398ae5;
    $primary2: #2c456a; lighten($voc-broadcast-blue, 20%); 			//#076dde;
    $primary3: $base-color;
    $primary4: #070a10;  darken($voc-broadcast-blue, 5%); 			//#033f82;
    $primary5: darken($voc-broadcast-blue, 10%);//#023063; //ne obstaja
*/
:root,
:before,
:after {
    --voc-navy-blue: #0f3055;
    --voc-broadcast-blue: #0e1622;
    --voc-blue:#142640;
    --voc-medium-blue:#456580;
    --voc-light-blue:#dae8ef;

    --primary0: #ebf0f7; /* lighten($voc-broadcast-blue, 85%); */
    --primary1: #90aad1; /* lighten($voc-broadcast-blue, 60%); */
    --primary2: #2c456a; /* lighten($voc-broadcast-blue, 20%); */
    --primary3: #0e1622; /* $voc-broadcast-blue */
    --primary4: #070a10; /* darken($voc-broadcast-blue, 5%); */
    --primary5: #0b243f; /* darken($voc-broadcast-blue, 10%); */
  
    /*darken http://scg.ar-ch.org/*/
    --primary4-d5: var(--primary5);
    
  
    --white: #ffffff;
  
    --base-color: var(--voc-blue);
    --base-icon-color: var(--gray8); /* icon color in inputs grids*/
    --base-title-color: var(--gray4);
  
    --selected-bg: var(--voc-light-blue);
    --selected-color: var(--gray10);
  
    --over-bg: var(--primary0);
    --over-color: var(--gray10);
  
    --bg-dark: var(--voc-navy-blue);
    --bg-main: var(--voc-medium-blue);
  
    --footer-bg: var(--voc-blue);
  
    /*BADGE*/
    --badge-bg: #056ac0; /* saturate($voc-medium-blue, 65%) */
    --my-badge-bg-color: var(--badge-bg);
  
    /* Buttons */
    --my-btn-default-bg-color: var(--voc-medium-blue);
    --my-btn-default-color: var(--white);
    --my-btn-default-bg-over: #334b5f; /*darken($voc-medium-blue, 10%);*/
    --my-btn-default-focus: var(--voc-medium-blue);
    --my-btn-default-disabled: var(--gray4);
  
    /* TAB PANEL*/
    --tab-panel-base: var(--bg-dark);
    --tab-panel-bar: var(--voc-blue);
  
    --cb-check-color: var(--primary1);
    --cb-check-over-color: var(--primary3);
  
    /*TAB BUTTONS
    defaul tab*/
    --my-tab-default-active-bg-color: var(--tab-panel-base);
    --my-tab-default-bg-color: var(--tab-panel-bar);

    /* MESSAGES */
    --msg-r-bg-color: rgba(236, 238, 239, 0.7); /*gray2*/
    --msg-l-bg-color: rgba(144, 170, 209, 0.15); /*primary1*/
  }