/* @Variables
===================================== */
:root {
    /*Primary Colors*/
    --primary-blue: #002D5B;
    --primary-green: #39B54A;
    
    /*Secondary Colors*/
    --secondary-blue: #1063B1;
    --blue: #A6DBF0;
    --light-blue: #E6F6FF;
    --dark-green: #2C722D;
    --secondary-green: #3A953C;
    --light-green: #CFEDD4;
    --orange: #D56128;
    --light-orange: #F9E2D7;
    --yellow: #FFBA08;
    --light-yellow: #FFE193;
    --red: #953C3C;
    --pink: #FAA1A1;

    /*UI Colors*/
    --black: #000000;
    --dark-gray: #464646;
    --gray: #767676;
    --medium-gray: #BEBEBE;
    --light-gray: #DADADA;
    --very-light-gray: #F6F6F6;
    --white: #fff;
    
    /*Global Text Colors*/
    --primary-headings: var(--primary-blue);
    --secondary-headings: var(--dark-gray);
    --tertiary-headings: var(--gray);
    --body-copy: var(--gray);
    --table-headings: var(--dark-gray);
    --labels: var(--gray);
    --menu: var(--gray);
    --links: var(--secondary-green);
    
    /*Global UI Colors*/
    --borders: var(--medium-gray);
    --alt-rows: var(--very-light-gray);
    --icons: var(--gray);
    --hover: var(--secondary-blue);
    --focus: var(--secondary-blue);
    --active: var(--secondary-blue);
    --hover-bg: var(--light-blue);
    --primary-bg: var(--white);
    
    /*Box Shadows*/
    --box-shadow-large: 0 0 30px rgba(0, 0, 0, 0.15);
    --box-shadow-medium: 0 0 15px rgba(0, 0, 0, 0.15);
    --box-shadow-small: 0 0 6px rgba(0, 0, 0, 0.15);
    
    /*Radius*/
    --radius-large: 1.875em;
    --radius-medium: 0.9375em;
    --radius-small: 0.375em;
    
    /*Global Text Sizes*/
    --default-text-size: 0.975rem;
}
/* @end Variables
===================================== */

/* @Backgrounds
===================================== */
.primary-blue-bg {
  background-color: var(--primary-blue);
}

.primary-green-bg {
  background-color: var(--primary-green);
}

.secondary-blue-bg {
  background-color: var(--secondary-blue);
}

.blue-bg {
  background-color: var(--blue);
}

.light-blue-bg {
  background-color: var(--light-blue);
}

.dark-green-bg {
  background-color: var(--dark-green);
}

.secondary-green-bg {
  background-color: var(--secondary-green);
}

.light-green-bg {
  background-color: var(--light-green);
}

.orange-bg {
  background-color: var(--orange);
}

.light-orange-bg {
  background-color: var(--light-orange);
}

.yellow-bg {
  background-color: var(--yellow);
}

.light-yellow-bg {
  background-color: var(--light-yellow);
}

.red-bg {
  background-color: var(--red);
}

.pink-bg {
  background-color: var(--pink);
}

.black-bg {
  background-color: var(--black);
}

.dark-gray-bg {
  background-color: var(--dark-gray);
}

.gray-bg {
  background-color: var(--gray);
}

.medium-gray-bg {
  background-color: var(--medium-gray);
}

.light-gray-bg {
  background-color: var(--light-gray);
}

.very-light-gray-bg {
  background-color: var(--very-light-gray);
}

.white-bg {
  background-color: var(--white);
}
/* @end Backgrounds
===================================== */

/* @Text Color
===================================== */
.secondary-green-text {
  color: var(--secondary-green);
}
.primary-blue-text {
  color: var(--primary-blue);
}
.secondary-blue-text {
  color: var(--secondary-blue);
}

.white-text {
  color: var(--white) !important;
}

.dark-green-text {
  color: var(--dark-green) !important;
}

.orange-text {
  color: var(--orange) !important;
}

.yellow-text {
  color: var(--yellow) !important;
}
/* @end Text Color
===================================== */

/* @Boxshadow
===================================== */
.shadow-large {
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
}

.shadow-medium {
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
}

.shadow-small {
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}
/* @end Shadows
===================================== */


/* @Border Radius
===================================== */
.radius-large{
    border-radius: var(--radius-large) !important;
}

.radius-medium{
    border-radius: var(--radius-medium) !important;
}

.radius-small{
    border-radius: var(--radius-small) !important;
}

.borders{
    border: 1px solid var(--borders);
}