:root {
    /* 
        Backgrounds 
    */
    --main-bg-color: #253237;
    --light-bg-color: #9db4c0;
    /* 
        Colors 
    */
    --primaryColor: red;
    --primaryDarkColor: red;
    --primaryDarkerColor: red;
    --primaryTextColor: blue;
    /* 
        Header OK 
    */
    --headerNavHeigth: 55px;
    --headerBorderWidth: 1px;
    --headerBorderColor: #333333;
    --headerBgColor: #333333;
    --headerTextColor: #ffffff;
    --headerFontWeight: 700;
    --headerIconTextColor: #ffffff;
    /* 
        Content 
    */
    --contentBorderWidth: 1px;
    --contentBorderColor: #9db4cc;
    --contentBgColor: #9db4c0;
    --contentTextColor: #333333;
    /* 
        Default State OK 
    */
    --stateDefaultBorderWidth: 1px;
    --stateDefaultBorderRadius: 0px;
    --stateDefaultBorderColor: #191919;
    --stateDefaultBgColor: #252525;
    --stateDefaultTextColor: #dedede;
    /* 
        Active State 
    */
    --stateActiveBorderColor: red;
    --stateActiveBgColor: red;
    --stateActiveTextColor: #212121;
    /* 
        Highlight State (active hover) 
    */
    --stateHighlightBorderColor: #005b9f;
    --stateHighlightBgColor: #005b9f;
    --stateHighlightTextColor: #ffffff;
    /* 
        Focus State OK 
    */
    --stateFocusBorderColor: #8dcdff;
    --stateFocusBgColor: #8dcdff;
    --stateFocusTextColor: #ffffff;
    /* 
        Error State 
    */
    --stateErrorBorderColor: #f44336;
    --stateErrorBgColor: #f5554a;
    --stateErrorTextColor: #cd0a0a;
    /* 
        Hover State 
    */
    --stateHoverBorderColor: #555555;
    --stateHoverBgColor: #555555;
    --stateHoverTextColor: #ffffff;
    /* 
        Forms 
    */
    --inputBgColor: #ffffff;
    --inputTextColor: #222222;
    --invalidInputBorderColor: #ff0000;
    --inputGroupTextColor: #ffffff;
}