:root {

    --theme-fg: #000;
    --theme-background: #F2F2F2;
    --theme-white: #fff;
 
    --theme-default: #222;
    --theme-default-bg: #222;
    --theme-default-text: #fff;
    --theme-default-fg: #222;    

    --theme-clear: transparent;
    --theme-clear-bg: transparent;
    --theme-clear-text: #222;
    --theme-clear-fg: transparent;

    --theme-pale: #EAEAEA;
    --theme-pale-bg: #EAEAEA;
    --theme-pale-text: #333;
    --theme-pale-fg: #EAEAEA;    

    --theme-grey: #DCDCDC;
    --theme-grey-bg: #DCDCDC;
    --theme-grey-text: #333;
    --theme-grey-fg: #DCDCDC;


    --theme-primary: #E1251B;
    --theme-primary-bg: #E1251B;
    --theme-primary-text: #fff;
    --theme-primary-fg: #E1251B;

    --theme-danger: #C41910;
    --theme-danger-bg: #C41910;
    --theme-danger-text: #fff;
    --theme-danger-fg: #C41910;

    --theme-danger-light: #FFBAB6;
    --theme-danger-light-bg: #FFBAB6;
    --theme-danger-light-text: #222;
    --theme-danger-light-fg: #FFBAB6;


    --theme-success: #157F1F;
    --theme-success-bg: #157F1F;
    --theme-success-text: white;
    --theme-success-fg: #157F1F;

    --theme-success-light: #B0DEB4;
    --theme-success-light-bg: #B0DEB4;
    --theme-success-light-text: #222;
    --theme-success-light-fg: #B0DEB4;


    --theme-warning: #ffc107;
    --theme-warning-bg: #ffc107;
    --theme-warning-text: #333;
    --theme-warning-fg: #ffc107;   

    --theme-warning-light: #FFE3A6;
    --theme-warning-light-bg: #FFE3A6;
    --theme-warning-light-text: #333;
    --theme-warning-light-fg: #FFE3A6;   

}



/*
 * Theme related
 */

 .btn--disabled,
 .btn-disabled {
    background-color: #bbbbbb;
    color: #ffffff;
    pointer-events: none;
    cursor: not-allowed;
}





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

.theme-white,
.alert--white,
.btn--white,
.btn-white {
   background-color: var(--theme-white);
   color: var(--theme-default);
}



.text-default {
    color: var(--theme-default-fg);
}

a.alert--default,
.alert--default a {
   color: var(--theme-default-text);
}

.theme-default,
.alert--default,
.btn--default,
.btn-default {
   background-color: var(--theme-default-bg);
   color: var(--theme-default-text);
}

.btn--default.active:hover,
.btn-default.active:hover,
.btn--default:hover,
.btn-default:hover {
    background-color: var(--theme-primary-bg);
    color: var(--theme-white);
    text-decoration: none;
}

.btn--default.active svg path,
.btn-default.active svg path,
.btn--default:hover svg path,
.btn-default:hover svg path {
    fill: white;
}





.text-primary {
    color: var(--theme-primary-fg);
}

a.alert--primary,
.alert--primary a {
   color: var(--theme-primary-text);
}

.theme-primary,
.alert--primary,
.btn--primary,
.btn-primary {
   background-color: var(--theme-primary-bg);
   color: var(--theme-primary-text);
}

.btn--primary.active:hover,
.btn-primary.active:hover,
.btn--primary:hover,
.btn-primary:hover {
    background-color: var(--theme-default-bg);
    color: var(--theme-white);
    text-decoration: none;
}

    .alert--notice .btn--primary.active:hover,
    .alert--notice .btn-primary.active:hover,
    .alert--notice .btn--primary:hover,
    .alert--notice .btn-primary:hover,
    .alert--default .btn--primary.active:hover,
    .alert--default .btn-primary.active:hover,
    .alert--default .btn--primary:hover,
    .alert--default .btn-primary:hover,
    .theme-default .btn--primary.active:hover,
    .theme-default .btn-primary.active:hover,
    .theme-default .btn--primary:hover,
    .theme-default .btn-primary:hover {
        background-color: var(--theme-white);
        color: var(--theme-primary);
        text-decoration: none;
    }

.btn--primary.active svg path,
.btn-primary.active svg path,
.btn--primary:hover svg path,
.btn-primary:hover svg path {
    fill: white;
}





.text-danger {
     color: var(--theme-danger-fg);
}

a.alert--danger,
.alert--danger a {
    color: var(--theme-danger-text);
}

.theme-danger,
.alert--danger,
.btn--danger,
.btn-danger {
    background-color: var(--theme-danger-bg);
    color: var(--theme-danger-text);
}

.btn--danger.active:hover,
.btn-danger.active:hover,
.btn--danger:hover,
.btn-danger:hover {
    background-color: var(--theme-default-bg);
    color: var(--theme-white);
    text-decoration: none;
}

.btn--danger.active svg path,
.btn-danger.active svg path,
.btn--danger:hover svg path,
.btn-danger:hover svg path {
    fill: white;
}




.text-danger-light {
    color: var(--theme-danger-light-fg);
}

a.alert--danger-light,
.alert--danger-light a {
   color: var(--theme-danger-light-text);
}

.theme-danger-light,
.alert--danger-light,
.btn--danger-light,
.btn-danger-light {
   background-color: var(--theme-danger-light-bg);
   color: var(--theme-danger-light-text);
}

.btn--danger-light.active:hover,
.btn-danger-light.active:hover,
.btn--danger-light:hover,
.btn-danger-light:hover {
   background-color: var(--theme-default-bg);
   color: var(--theme-white);
   text-decoration: none;
}

.btn--danger-light.active svg path,
.btn-danger-light.active svg path,
.btn--danger-light:hover svg path,
.btn-danger-light:hover svg path {
   fill: white;
}






.text-success {
    color: var(--theme-success-fg);
}

a.alert--success,
.alert--success a {
    color: var(--theme-success-text);
}

.theme-success,
.alert--success,
.btn--success,
.btn-success {
    background-color: var(--theme-success-bg);
    color: var(--theme-success-text);
}

.btn--success.active:hover,
.btn-success.active:hover,
.btn--success:hover,
.btn-success:hover {
    background-color: var(--theme-default-bg);
    color: var(--theme-white);
    text-decoration: none;
}

.btn--success.active svg path,
.btn-success.active svg path,
.btn--success:hover svg path,
.btn-success:hover svg path {
    fill: white;
}




.text-success-light {
    color: var(--theme-success-light-fg);
}

a.alert--success-light,
.alert--success-light a {
    color: var(--theme-success-light-text);
}

.theme-success-light,
.alert--success-light,
.btn--success-light,
.btn-success-light {
    background-color: var(--theme-success-light-bg);
    color: var(--theme-success-light-text);
}

.btn--success-light.active:hover,
.btn-success-light.active:hover,
.btn--success-light:hover,
.btn-success-light:hover {
    background-color: var(--theme-default-bg);
    color: var(--theme-white);
    text-decoration: none;
}

.btn--success-light.active svg path,
.btn-success-light.active svg path,
.btn--success-light:hover svg path,
.btn-success-light:hover svg path {
    fill: white;
}





.text-warning {
    color: var(--theme-warning-fg);
}

a.alert--warning,
.alert--warning a {
    color: var(--theme-warning-text);
}

.theme-warning,
.alert--warning,
.btn--warning,
.btn-warning {
    background-color: var(--theme-warning-bg);
    color: var(--theme-warning-text);
}

.btn--warning.active:hover,
.btn-warning.active:hover,
.btn--warning:hover,
.btn-warning:hover {
    background-color: var(--theme-default-bg);
    color: var(--theme-white);
    text-decoration: none;
}

.btn--warning.active svg path,
.btn-warning.active svg path,
.btn--warning:hover svg path,
.btn-warning:hover svg path {
    fill: white;
}




.text-warning-light {
    color: var(--theme-warning-light-fg);
}

a.alert--warning-light,
.alert--warning-light a {
    color: var(--theme-warning-light-text);
}

.theme-warning-light,
.alert--warning-light,
.btn--warning-light,
.btn-warning-light {
    background-color: var(--theme-warning-light-bg);
    color: var(--theme-warning-light-text);
}

.btn--warning-light.active:hover,
.btn-warning-light.active:hover,
.btn--warning-light:hover,
.btn-warning-light:hover {
    background-color: var(--theme-default-bg);
    color: var(--theme-white);
    text-decoration: none;
}

.btn--warning-light.active svg path,
.btn-warning-light.active svg path,
.btn--warning-light:hover svg path,
.btn-warning-light:hover svg path {
    fill: white;
}





.text-pale {
    color: var(--theme-pale-fg);
}

a.alert--pale,
.alert--pale a {
    color: var(--theme-pale-text);
}

.theme-pale,
.alert--pale,
.btn--pale,
.btn-pale {
    background-color: var(--theme-pale-bg);
    color: var(--theme-pale-text);
}

.btn--pale.active:hover,
.btn-pale.active:hover,
.btn--pale:hover,
.btn-pale:hover {
    background-color: var(--theme-default-bg);
    color: var(--theme-white);
    text-decoration: none;
}

.btn--pale.active svg path,
.btn-pale.active svg path,
.btn--pale:hover svg path,
.btn-pale:hover svg path {
    fill: white;
}





.text-grey {
    color: var(--theme-grey-fg);
}

a.alert--grey,
.alert--grey a {
    color: var(--theme-grey-text);
}

.theme-grey,
.alert--grey,
.btn--grey,
.btn-grey {
    background-color: var(--theme-grey-bg);
    color: var(--theme-grey-text);
}

.btn--grey.active:hover,
.btn-grey.active:hover,
.btn--grey:hover,
.btn-grey:hover {
    background-color: var(--theme-default-bg);
    color: var(--theme-white);
    text-decoration: none;
}

.btn--grey.active svg path,
.btn-grey.active svg path,
.btn--grey:hover svg path,
.btn-grey:hover svg path {
    fill: white;
}





.text-notice {
    color: var(--theme-grey-fg);
}

a.alert--notice,
.alert--notice a {
    color: var(--theme-grey-text);
}

.theme-notice,
.alert--notice,
.btn--notice,
.btn-notice {
    background-color: var(--theme-grey-bg);
    color: var(--theme-grey-text);
}

.btn--notice.active:hover,
.btn-notice.active:hover,
.btn--notice:hover,
.btn-notice:hover {
    background-color: var(--theme-default-bg);
    color: var(--theme-white);
    text-decoration: none;
}

.btn--notice.active svg path,
.btn-notice.active svg path,
.btn--notice:hover svg path,
.btn-notice:hover svg path {
    fill: white;
}





.theme-clear,
.alert--clear,
.btn--clear,
.btn-clear {
    background-color: transparent;
}

.btn--clear.active:hover,
.btn-clear.active:hover,
.btn--clear:hover,
.btn-clear:hover {
    background-color: var(--theme-primary-bg);
    color: var(--theme-white);
    text-decoration: none;
}

.btn--clear.active svg path,
.btn-clear.active svg path,
.btn--clear:hover svg path,
.btn-clear:hover svg path {
    fill: white;
}