/* global vars */
:root {
    /* COLOR PALETTE*/
    --form-color: #ffffff;
  
    --background: #eaeff5; 
    --dropdown-highlight: #eaeff5;
  
    --add-button: #17202d;
    --main-side-bar: #17202d;
  
    --asset-highlight: #0096FB;
  
    --validation-error:#941724;
    --validation-warning: #f69a3b;
    --validation-warning-secondary: #e08b36;

    --main-text: #333533;
  
    --local-navigation: #3d4655;
    --remove-button: #3d4655;
    --local-navigation-highlighted: white;
  
    --box-outlines: #a5a5a5;
    --greyed-text: #0096FB;
  
    --button: #b8c1d3;
    --unselected-tab: #b8c1d3;
  
    --greyed-out-content: #F0F0F0;

    /* MEASUREMENTS*/

    --margined: 16px;
    --half-margined: 8px;
    
    --tiny-rounded: 4px;
    --little-rounded: 8px;
    --big-rounded: 16px;

    /* FONT */
    --title-size: 16px;
    --text-size: 14px;
    --reminder-size: 10px;
  }

/* Classes that just reflect a global var and nothing else */

.half-margined
{
margin-bottom: var(--half-margined);
}

.margined
{
margin-bottom: var(--margined);
}

.tiny-rounded
{
  border-radius: var(--tiny-rounded) !important;
}
.little-rounded
{
  border-radius: var(--little-rounded) ;
}

.big-rounded
{
  border-radius:  var(--big-rounded) ;
}

.faded {
    color: var(--greyed-text);
}

.big-rounded-top
{
  border-top-right-radius:  var(--big-rounded) !important;
  border-top-left-radius:  var(--big-rounded) !important;
}