/*************************************************
******  Från StatisticonShared projektet        ******
******  Kopieras automatiskt in i projekten ******
******  Ändringar görs i StatisticonShared      ******
**************************************************/

/********** STATISTICON COLORS ********/
:root {
    --STAT-blue: #344A9A;
    --STAT-lightblue: #00B4EB;
    --STAT-green: #008249;
    --STAT-lightgreen: #7FC349;
    --STAT-orange: #F58345;
    --STAT-yellow: #FFDE2F;
    --STAT-purple: #7B3182;
    --STAT-pink: #C75799;
    --lightgrey: #f0f0f0;
    --grey: #b8b8b8;
    --darkgrey: #505050;
    --footer: #d2d2d2;
}

.stat-bgcolor-pink {
    background-color: var(--STAT-pink);
}

.stat-bgcolor-purple {
    background-color: var(--STAT-purple);
}

.stat-bgcolor-blue {
    background-color: var(--STAT-blue);
}

.stat-bgcolor-lightblue {
    background-color: var(--STAT-lightblue);
}

.stat-bgcolor-green {
    background-color: var(--STAT-green);
}

.stat-bgcolor-lightgreen {
    background-color: var(--STAT-lightgreen);
}

.stat-bgcolor-orange {
    background-color: var(--STAT-orange);
}

.stat-bgcolor-yellow {
    background-color: var(--STAT-yellow);
}

.stat-bgcolor-darkgrey {
    background-color: var(--darkgrey);
}

.stat-bgcolor-lightgrey {
    background-color: var(--lightgrey);
}

.stat-bgcolor-white {
    background-color: white;
}

.stat-bgcolor-none {
    background-color: transparent;
}

/*************** Font color ***************/

.stat-color-pink {
    color: var(--STAT-pink);
}

.stat-color-blue {
    color: var(--STAT-blue);
}

.stat-color-lightblue {
    color: var(--STAT-lightblue);
}

.stat-color-lightgreen {
    color: var(--STAT-lightgreen);
}

.stat-color-orange {
    color: var(--STAT-orange);
}

.stat-color-white {
    color: white;
}

.stat-color-white-important {
    color: white !important;
}

.stat-color-grey {
    color: var(--darkgrey);
}

.stat-color-lightgrey {
    color: var(--grey);
}

/***************************************/
/*************** Buttons ***************/

/******** Primary ********/
.btn-primary {
    background-color: var(--STAT-lightblue);
    border-color: var(--STAT-lightblue);
    color: white;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
        background-color: var(--STAT-blue);
        border-color: var(--STAT-blue);
        color: white;
    }

.btn-primary-inverted {
    background-color: var(--STAT-blue);
    border-color: var(--STAT-blue);
    color: white;
}

    .btn-primary-inverted:hover, .btn-primary-inverted:focus, .btn-primary-inverted:active, .btn-primary-inverted.active, .open > .dropdown-toggle.btn-primary-inverted {
        background-color: var(--STAT-lightblue);
        border-color: var(--STAT-lightblue);
        color: white;
    }

/******** Secondary ********/
.btn-secondary {
    background-color: var(--grey);
    border-color: var(--grey);
    color: white;
}

    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .open > .dropdown-toggle.btn-secondary {
        background-color: var(--darkgrey);
        border-color: var(--darkgrey);
        color: white;
    }

.btn-secondary-inverted {
    background-color: var(--darkgrey);
    border-color: var(--darkgrey);
    color: white;
}

    .btn-secondary-inverted:hover, .btn-secondary-inverted:focus, .btn-secondary-inverted:active, .btn-secondary-inverted.active, .open > .dropdown-toggle.btn-secondary-inverted {
        background-color: var(--grey);
        border-color: var(--grey);
        color: white;
    }

/******** Success ********/
.btn-success {
    background-color: var(--STAT-green);
    border-color: var(--STAT-green);
    color: white;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
        background-color: var(--STAT-lightgreen);
        border-color: var(--STAT-lightgreen);
        color: white;
    }

.btn-success-inverted {
    background-color: var(--STAT-lightgreen);
    border-color: var(--STAT-lightgreen);
    color: white;
}

    .btn-success-inverted:hover, .btn-success-inverted:focus, .btn-success-inverted:active, .btn-success-inverted.active, .open > .dropdown-toggle.btn-success-inverted {
        background-color: var(--STAT-green);
        border-color: var(--STAT-green);
        color: white;
    }

/******** Danger ********/
/*.btn-danger {
    background-color: var(--STAT-green);
    border-color: var(--STAT-green);
    color: white;
}

    .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
        background-color: var(--STAT-lightgreen);
        border-color: var(--STAT-lightgreen);
        color: white;
    }

.btn-danger-inverted {
    background-color: var(--STAT-lightgreen);
    border-color: var(--STAT-lightgreen);
    color: white;
}

    .btn-danger-inverted:hover, .btn-danger-inverted:focus, .btn-danger-inverted:active, .btn-danger-inverted.active, .open > .dropdown-toggle.btn-danger-inverted {
        background-color: var(--STAT-green);
        border-color: var(--STAT-green);
        color: white;
    }*/

/******** Warning ********/
.btn-warning {
    background-color: var(--STAT-yellow);
    border-color: var(--STAT-yellow);
    color: var(--btn-black);
}

    .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
        background-color: var(--STAT-orange);
        border-color: var(--STAT-orange);
        color: var(--btn-black);
    }

.btn-warning-inverted {
    background-color: var(--STAT-orange);
    border-color: var(--STAT-orange);
    color: var(--btn-black);
}

    .btn-warning-inverted:hover, .btn-warning-inverted:focus, .btn-warning-inverted:active, .btn-warning-inverted.active, .open > .dropdown-toggle.btn-warning-inverted {
        background-color: var(--STAT-yellow);
        border-color: var(--STAT-yellow);
        color: var(--btn-black);
    }

/******** Info ********/
.btn-info {
    background-color: var(--STAT-lightblue);
    border-color: var(--STAT-lightblue);
    color: white;
}

    .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {
        background-color: var(--STAT-blue);
        border-color: var(--STAT-blue);
        color: white;
    }

.btn-info-inverted {
    background-color: var(--STAT-blue);
    border-color: var(--STAT-blue);
    color: white;
}

    .btn-info-inverted:hover, .btn-info-inverted:focus, .btn-info-inverted:active, .btn-info-inverted.active, .open > .dropdown-toggle.btn-info-inverted {
        background-color: var(--STAT-lightblue);
        border-color: var(--STAT-lightblue);
        color: white;
    }

/*************** Color Btn ***************/
.btn-purple {
    color: white;
    background: var(--STAT-purple);
}

    .btn-purple:hover {
        color: white;
        background: var(--STAT-pink);
    }


.btn-blue {
    color: white;
    background: var(--STAT-blue);
}

    .btn-blue:hover {
        color: white;
        background: var(--STAT-lightblue);
    }

.btn-green {
    color: white;
    background: var(--STAT-green);
}

    .btn-green:hover {
        color: white;
        background: var(--STAT-lightgreen);
    }