:root {

/** Typography **/
--font-family-sans-serif: 'Nunito', sans-serif;
--font-size-base: 0.9rem;
--line-height-base: 1.6;

/** World War II Online Colors **/
--wwiiol-black: #020202;
--wwiiol-footer: #131618;
--wwiiol-grey-dark: #222;
--wwiiol-grey-light: #a7b0b9;
--wwiiol-grey-med: #3a3f44;
--wwiiol-heading: #0cefe7;
--wwiiol-orange: #642D00;
--wwiiol-white: #ffffff;
--wwiiol-yellow: #ffcc00;

/** Body **/
--body-bg: var(--wwiiol-white);
--wwiiol-cont-bg: var(--wwiiol-black);

/** Footer **/
--wwiiol-footer-bg: var(--wwiiol-footer);
--wwiiol-footer-height: 60px;

/** Borders **/
--wwiiol-border-color: var(--wwiiol-orange); 
--list-group-border: var(--wwiiol-border-color);
--navbar-default-border: var(--wwiiol-border-color);
--panel-default-border: var(--wwiiol-border-color);
--panel-inner-border: var(--wwiiol-border-color);

/** Typography **/
--icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
--font-family-sans-serif: "Raleway", sans-serif;
--font-size-base: 14px;
--line-height-base: 1.6;
--text-color: var(--wwiiol-white);

/** Links **/
--wwiiol-link: var(--wwiiol-yellow);

/** Navbar **/
--navbar-default-color:             var(--wwiiol-grey-light);
--navbar-default-bg:                #1a1a1a;
--navbar-default-border:            darken(var(--navbar-default-bg), 6.5%);

/** Navbar links **/
--navbar-default-link-color:                var(--wwiiol-link);
--navbar-default-link-hover-color:          lighten(var(--wwiiol-link), 25%);
--navbar-default-link-hover-bg:             transparent ;
--navbar-default-link-active-color:         darken(var(--wwiiol-link), 10%);
--navbar-default-link-active-bg:            darken(var(--navbar-default-bg), 6.5%);
--navbar-default-link-disabled-color:       #ccc ;
--navbar-default-link-disabled-bg:          transparent ;

/** Navbar brand label **/
--navbar-default-brand-color:               var(--navbar-default-link-color);
--navbar-default-brand-hover-color:         darken(var(--navbar-default-brand-color), 10%);
--navbar-default-brand-hover-bg:            transparent ;

/** Navbar toggle **/
--navbar-default-toggle-hover-bg:           #ddd ;
--navbar-default-toggle-icon-bar-bg:        #888 ;
--navbar-default-toggle-border-color:       #ddd ;

/** Buttons **/
--btn-default-color: var(--text-color);
--btn-default-bg: lighten(var(--navbar-default-bg), 20%);
--btn-default-border: darken(var(--btn-default-bg), 10%);

/** Inputs **/
--input-bg: #3e444c;
--input-bg-disabled: lighten(var(--input-bg), 20%);
--input-color: #FFF;
--input-border-radius: 2px;
--input-border: darken(var(--text-color), 30%);
--input-border-focus: lighten(var(--brand-primary), 25%);
--input-color-placeholder: lighten(var(--text-color), 30%);

/** Input groups **/
--input-group-addon-bg : lighten(var(--input-bg), 15%);
--input-group-addon-border-color: darken(var(--text-color), 30%);

/** Panels **/
--panel-default-heading-bg: #fff;

/** Tables **/
--table-bg: lighten(var(--wwiiol-grey-dark), 3%);
--table-bg-accent: lighten(var(--wwiiol-grey-dark,) 7%);
--table-border-color :var(--wwiiol-grey-dark);

/** Modal Dialogs **/
/**** Background color of modal content area **/
--modal-content-bg:                             #444 ;
/**** Modal content border color **/
--modal-content-border-color:                   rgba(0,0,0,.2);
/**** Modal content border color **for IE8**  **/
--modal-content-fallback-border-color:          #999 ;

/**** Modal backdrop background color **/
--modal-backdrop-bg: #000 ;
/**** Modal backdrop opacity **/
--modal-backdrop-opacity: .5 ;
/**** Modal header border color **/
--modal-header-border-color: darken(var(--modal-content-bg), 5%);
/**** Modal footer border color **/
--modal-footer-border-color:   var(--modal-header-border-color);

/** Close "x"" 
.modal-header .close {
    color: var(--wwiiol-white);
}
**/
/**
* Standard States
**/
--state-success-text:             var(--brand-success);
--state-success-bg:               var(--brand-success);
--state-success-border:           var(--brand-success);

--state-info-text:                var(--brand-info);
--state-info-bg:                  var(--brand-info);

--state-warning-text:             var(--brand-warning);
--state-warning-bg:               var(--brand-warning);
--state-warning-border:           var(--brand-warning);

--state-danger-text:              var(--brand-danger);
--state-danger-bg:                var(--brand-danger);
--state-danger-border:            var(--brand-danger);

/**
* Panels
**/
--panel-bg:                 #000 ;

--panel-primary-border:     var(--wwiiol-orange);
--panel-primary-text:       var(--wwiiol-white);
--panel-primary-heading-bg: lighten(var(--wwiiol-orange), 10%);
--panel-primary-border:     var(--wwiiol-orange);

--panel-success-text:       #FFF ;
--panel-info-text:          #FFF ;
--panel-warning-text:       #FFF ;
--panel-danger-text:        #FFF ;

/**
* Alerts - colored with white text
**/
--alert-success-bg:            var(--state-success-bg);
--alert-success-text:          #FFF ;
--alert-success-border:        var(--state-success-border);

--alert-info-bg:               var(--state-info-bg);
--alert-info-text:             #FFF ;
--alert-info-border:           var(--state-info-border);

--alert-warning-bg:            var(--state-warning-bg);
--alert-warning-text:          #FFF ;
--alert-warning-border:        var(--state-warning-border);

--alert-danger-bg:             var(--state-danger-bg);
--alert-danger-text:           #FFF ;
--alert-danger-border:         var(--state-danger-border);

/**
* Typography
**/
--font-family-sans-serif: "Raleway", sans-serif;
--font-size-base: 14px;
--line-height-base: 1.6;
--text-color: #636b6f;

/**
* Popovers
**/

/**** Popover body background color  **/
--popover-bg:                          #333 ;
/**** Popover maximum width **/
--popover-max-width:                   276px ;
/**** Popover border color **/
--popover-border-color:                rgba(0,0,0,.2);
/**** Popover fallback border color **/
--popover-fallback-border-color:       #ccc ;

/**** Popover title background color **/
--popover-title-bg:                    darken(var(--popover-bg), 3%);

/**** Popover arrow color **/
--popover-arrow-color:                 var(--popover-bg);

/**** Popover outer arrow color **/
--popover-arrow-outer-color:           var(--popover-border-color), 0.05;

/**** Popover outer arrow fallback color **/
--popover-arrow-outer-fallback-color:  darken(var(--popover-fallback-border-color), 20%);

}