/*!
 * # Semantic UI 2.0.0 - Statistic
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */


/*******************************
           Statistic
*******************************/


/* Standalone */
.ui.statistic {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 1em 0em;
    max-width: auto;
}

    .ui.statistic + .ui.statistic {
        margin: 0em 0em 0em 1.5em;
    }

    .ui.statistic:first-child {
        margin-top: 0em;
    }

    .ui.statistic:last-child {
        margin-bottom: 0em;
    }


/*******************************
            Group
*******************************/


/* Grouped */
.ui.statistics {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .ui.statistics > .statistic {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin: 0em 1.5em 2em;
        max-width: auto;
    }

.ui.statistics {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 1em -1.5em -2em;
}

    /* Clearing */
    .ui.statistics:after {
        display: block;
        content: ' ';
        height: 0px;
        clear: both;
        overflow: hidden;
        visibility: hidden;
    }

    .ui.statistics:first-child {
        margin-top: 0em;
    }

    .ui.statistics:last-child {
        margin-bottom: 0em;
    }


    /*******************************
            Content
*******************************/


    /*--------------
      Value
---------------*/

    .ui.statistics .statistic > .value,
    .ui.statistic > .value {
        font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
        font-size: 3rem;
        font-weight: normal;
        line-height: 1em;
        color: #1b1c1d;
        text-transform: uppercase;
        text-align: center;
    }

    /*--------------
     Label
---------------*/

    .ui.statistics .statistic > .label,
    .ui.statistic > .label {
        font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
        font-size: 1em;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.87);
        text-transform: uppercase;
        text-align: center;
    }

        /* Top Label */
        .ui.statistics .statistic > .label ~ .value,
        .ui.statistic > .label ~ .value {
            margin-top: 0rem;
        }

    /* Bottom Label */
    .ui.statistics .statistic > .value ~ .label,
    .ui.statistic > .value ~ .label {
        margin-top: 0rem;
    }


    /*******************************
             Types
*******************************/


    /*--------------
   Icon Value
---------------*/

    .ui.statistics .statistic > .value .semantic-icon,
    .ui.statistic > .value .semantic-icon {
        opacity: 1;
        width: auto;
        margin: 0em;
    }

    /*--------------
   Text Value
---------------*/

    .ui.statistics .statistic > .text.value,
    .ui.statistic > .text.value {
        line-height: 1em;
        min-height: 2em;
        font-weight: bold;
        text-align: center;
    }

        .ui.statistics .statistic > .text.value + .label,
        .ui.statistic > .text.value + .label {
            text-align: center;
        }

    /*--------------
   Image Value
---------------*/

    .ui.statistics .statistic > .value img,
    .ui.statistic > .value img {
        max-height: 3rem;
        vertical-align: baseline;
    }


/*******************************
            Variations
*******************************/


/*--------------
      Count
---------------*/

.ui.ten.statistics {
    margin: 0em 0em -2em;
}

    .ui.ten.statistics .statistic {
        min-width: 10%;
        margin: 0em 0em 2em;
    }

.ui.nine.statistics {
    margin: 0em 0em -2em;
}

    .ui.nine.statistics .statistic {
        min-width: 11.11111111%;
        margin: 0em 0em 2em;
    }

.ui.eight.statistics {
    margin: 0em 0em -2em;
}

    .ui.eight.statistics .statistic {
        min-width: 12.5%;
        margin: 0em 0em 2em;
    }

.ui.seven.statistics {
    margin: 0em 0em -2em;
}

    .ui.seven.statistics .statistic {
        min-width: 14.28571429%;
        margin: 0em 0em 2em;
    }

.ui.six.statistics {
    margin: 0em 0em -2em;
}

    .ui.six.statistics .statistic {
        min-width: 16.66666667%;
        margin: 0em 0em 2em;
    }

.ui.five.statistics {
    margin: 0em 0em -2em;
}

    .ui.five.statistics .statistic {
        min-width: 20%;
        margin: 0em 0em 2em;
    }

.ui.four.statistics {
    margin: 0em 0em -2em;
}

    .ui.four.statistics .statistic {
        min-width: 25%;
        margin: 0em 0em 2em;
    }

.ui.three.statistics {
    margin: 0em 0em -2em;
}

    .ui.three.statistics .statistic {
        min-width: 33.33333333%;
        margin: 0em 0em 2em;
    }

.ui.two.statistics {
    margin: 0em 0em -2em;
}

    .ui.two.statistics .statistic {
        min-width: 50%;
        margin: 0em 0em 2em;
    }

.ui.one.statistics {
    margin: 0em 0em -2em;
}

    .ui.one.statistics .statistic {
        min-width: 100%;
        margin: 0em 0em 2em;
    }

/*--------------
   Horizontal
---------------*/

.ui.horizontal.statistic {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.ui.horizontal.statistics {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0em;
    max-width: none;
}

    .ui.horizontal.statistics .statistic {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        max-width: none;
        margin: 1em 0em;
    }

    .ui.horizontal.statistic > .text.value,
    .ui.horizontal.statistics > .statistic > .text.value {
        min-height: 0em !important;
    }

    .ui.horizontal.statistics .statistic > .value .semantic-icon,
    .ui.horizontal.statistic > .value .semantic-icon {
        width: 1.18em;
    }

    .ui.horizontal.statistics .statistic > .value,
    .ui.horizontal.statistic > .value {
        display: inline-block;
        vertical-align: middle;
    }

    .ui.horizontal.statistics .statistic > .label,
    .ui.horizontal.statistic > .label {
        display: inline-block;
        vertical-align: middle;
        margin: 0em 0em 0em 0.75em;
    }

/*--------------
     Colors
---------------*/




.ui.yellow.statistics .statistic > .value,
.ui.statistics .yellow.statistic > .value,
.ui.yellow.statistic > .value {
    color: #fbbd08;
}

.ui.olive.statistics .statistic > .value,
.ui.statistics .olive.statistic > .value,
.ui.olive.statistic > .value {
    color: #b5cc18;
}



.ui.teal.statistics .statistic > .value,
.ui.statistics .teal.statistic > .value,
.ui.teal.statistic > .value {
    color: #00b5ad;
}

.ui.redish.statistics .statistic > .value,
.ui.statistics .redish.statistic > .value,
.ui.redish.statistic > .value {
    color: #ff695e;
}

.ui.greenish.statistics .statistic > .value,
.ui.statistics .greenish.statistic > .value,
.ui.greenish.statistic > .value {
    color: #2ecc40;
}



.ui.blueish.statistics .statistic > .value,
.ui.statistics .blueish.statistic > .value,
.ui.blueish.statistic > .value {
    color: #54c8ff;
}


.black {
    border-color: #333 !important;
}




.ui.violet.statistics .statistic > .value,
.ui.statistics .violet.statistic > .value,
.ui.violet.statistic > .value {
    color: #6435c9;
}



.ui.pink.statistics .statistic > .value,
.ui.statistics .pink.statistic > .value,
.ui.pink.statistic > .value {
    color: #e03997;
}

.ui.brown.statistics .statistic > .value,
.ui.statistics .brown.statistic > .value,
.ui.brown.statistic > .value {
    color: #a5673f;
}

.ui.grey.statistics .statistic > .value,
.ui.statistics .grey.statistic > .value,
.ui.grey.statistic > .value {
    color: #767676;
}

/*--------------
    Inverted
---------------*/

.ui.inverted.statistics .statistic > .value,
.ui.inverted.statistic .value {
    color: #ffffff;
}

.ui.inverted.statistics .statistic > .label,
.ui.inverted.statistic .label {
    color: rgba(255, 255, 255, 0.9);
}

.ui.inverted.red.statistics .statistic > .value,
.ui.statistics .inverted.red.statistic > .value,
.ui.inverted.red.statistic > .value {
    color: #ff695e;
}

.ui.inverted.orange.statistics .statistic > .value,
.ui.statistics .inverted.orange.statistic > .value,
.ui.inverted.orange.statistic > .value {
    color: #ff851b;
}

.ui.inverted.yellow.statistics .statistic > .value,
.ui.statistics .inverted.yellow.statistic > .value,
.ui.inverted.yellow.statistic > .value {
    color: #ffe21f;
}

.ui.inverted.olive.statistics .statistic > .value,
.ui.statistics .inverted.olive.statistic > .value,
.ui.inverted.olive.statistic > .value {
    color: #d9e778;
}

.ui.inverted.green.statistics .statistic > .value,
.ui.statistics .inverted.green.statistic > .value,
.ui.inverted.green.statistic > .value {
    color: #2ecc40;
}

.ui.inverted.teal.statistics .statistic > .value,
.ui.statistics .inverted.teal.statistic > .value,
.ui.inverted.teal.statistic > .value {
    color: #6dffff;
}

.ui.inverted.blue.statistics .statistic > .value,
.ui.statistics .inverted.blue.statistic > .value,
.ui.inverted.blue.statistic > .value {
    color: #54c8ff;
}

.ui.inverted.violet.statistics .statistic > .value,
.ui.statistics .inverted.violet.statistic > .value,
.ui.inverted.violet.statistic > .value {
    color: #a291fb;
}


.ui.inverted.pink.statistics .statistic > .value,
.ui.statistics .inverted.pink.statistic > .value,
.ui.inverted.pink.statistic > .value {
    color: #ff8edf;
}

.ui.inverted.brown.statistics .statistic > .value,
.ui.statistics .inverted.brown.statistic > .value,
.ui.inverted.brown.statistic > .value {
    color: #d67c1c;
}

.ui.inverted.grey.statistics .statistic > .value,
.ui.statistics .inverted.grey.statistic > .value,
.ui.inverted.grey.statistic > .value {
    color: #dcddde;
}

/*--------------
    Floated
---------------*/

.ui[class*="left floated"].statistic {
    float: left;
    margin: 0em 2em 1em 0em;
}

.ui[class*="right floated"].statistic {
    float: right;
    margin: 0em 0em 1em 2em;
}

.ui.floated.statistic:last-child {
    margin-bottom: 0em;
}

/*--------------
     Sizes
---------------*/


/* Mini */
.ui.mini.statistics .statistic > .value,
.ui.mini.statistic > .value {
    font-size: 1.5rem;
}

.ui.mini.horizontal.statistics .statistic > .value,
.ui.mini.horizontal.statistic > .value {
    font-size: 1.5rem;
}

.ui.mini.statistics .statistic > .text.value,
.ui.mini.statistic > .text.value {
    font-size: 1rem;
}

/* Tiny */
.ui.tiny.statistics .statistic > .value,
.ui.tiny.statistic > .value {
    font-size: 2rem;
}

.ui.tiny.horizontal.statistics .statistic > .value,
.ui.tiny.horizontal.statistic > .value {
    font-size: 2rem;
}

.ui.tiny.statistics .statistic > .text.value,
.ui.tiny.statistic > .text.value {
    font-size: 1rem;
}

/* Small */
.ui.small.statistics .statistic > .value,
.ui.small.statistic > .value {
    font-size: 3rem;
}

.ui.small.horizontal.statistics .statistic > .value,
.ui.small.horizontal.statistic > .value {
    font-size: 2rem;
}

.ui.small.statistics .statistic > .text.value,
.ui.small.statistic > .text.value {
    font-size: 1rem;
}

/* Medium */
/*.ui.statistics .statistic > .value,
.ui.statistic > .value {
    font-size: 4rem;
}

.ui.horizontal.statistics .statistic > .value,
.ui.horizontal.statistic > .value {
    font-size: 3rem;
}

.ui.statistics .statistic > .text.value,
.ui.statistic > .text.value {
    font-size: 2rem;
}*/

/* Large */
.ui.large.statistics .statistic > .value,
.ui.large.statistic > .value {
    font-size: 5rem;
}

.ui.large.horizontal.statistics .statistic > .value,
.ui.large.horizontal.statistic > .value {
    font-size: 4rem;
}

.ui.large.statistics .statistic > .text.value,
.ui.large.statistic > .text.value {
    font-size: 2.5rem;
}

/* Huge */
.ui.huge.statistics .statistic > .value,
.ui.huge.statistic > .value {
    font-size: 6rem;
}

.ui.huge.horizontal.statistics .statistic > .value,
.ui.huge.horizontal.statistic > .value {
    font-size: 5rem;
}

.ui.huge.statistics .statistic > .text.value,
.ui.huge.statistic > .text.value {
    font-size: 2.5rem;
}


/*******************************
         Theme Overrides
*******************************/



/*******************************
    User Variable Overrides
*******************************/
/*Blue*/
.ui.blue.statistics .statistic > .value,
.ui.statistics .blue.statistic > .value,
.ui.blue.statistic > .value {
    background-color: hsla(202, 100%, 58%, 0.3) !important;
    border-color: hsla(202, 100%, 48%, 1) !important;
}

.ui.blue.darker.statistics .statistic > .value,
.ui.statistics .darker.blue.statistic > .value,
.ui.darker.blue.statistic > .value {
    background-color: hsla(202, 100%, 38%,  0.3) !important;
    border-color: hsla(202, 100%, 28%, 1) !important;
}

.ui.blue.dark.statistics .statistic > .value,
.ui.statistics .dark.blue.statistic > .value,
.ui.dark.blue.statistic > .value {
    background-color: hsla(202, 100%, 48%,  0.3) !important;
    border-color: hsla(202, 100%, 38%, 1) !important;
}

.ui.blue.light.statistics .statistic > .value,
.ui.statistics .light.blue.statistic > .value,
.ui.light.blue.statistic > .value {
    background-color: hsla(202, 100%, 68%,  0.3) !important;
    border-color: hsla(202, 100%, 58%, 1) !important;
}

/*Red*/
.ui.red.statistics .statistic > .value,
.ui.statistics .red.statistic > .value,
.ui.red.statistic > .value {
    background-color: hsla(0, 100%, 58%,  0.3) !important;
    border-color: hsla(0, 100%, 48%, 1) !important;
}

.ui.red.darker.statistics .statistic > .value,
.ui.statistics .red.darker.statistic > .value,
.ui.red.darker.statistic > .value {
    background-color: hsla(0, 100%, 38%,  0.3) !important;
    border-color: hsla(0, 100%, 28%, 1) !important;
}

.ui.red.dark.statistics .statistic > .value,
.ui.statistics .red.dark.statistic > .value,
.ui.red.dark.statistic > .value {
    background-color: hsla(0, 100%, 48%,  0.3) !important;
    border-color: hsla(0, 100%, 38%, 1) !important;
}

.ui.red.light.statistics .statistic > .value,
.ui.statistics .red.light.statistic > .value,
.ui.red.light.statistic > .value {
    background-color: hsla(0, 100%, 68%,  0.3) !important;
    border-color: hsla(0, 100%, 58%, 1) !important;
}

/*Green*/
.ui.green.statistics .statistic > .value,
.ui.statistics .green.statistic > .value,
.ui.green.statistic > .value {
    background-color: hsla(132, 100%, 49%,  0.3) !important;
    border-color: hsla(132, 100%, 39%, 1) !important;
}

.ui.green.darker.statistics .statistic > .value,
.ui.statistics .green.darker.statistic > .value,
.ui.darker.green.statistic > .value {
    background-color: hsla(132, 100%, 29%,  0.31) !important;
    border-color: hsla(132, 100%, 19%, 1) !important;
}

.ui.green.dark.statistics .statistic > .value,
.ui.statistics .green.dark.statistic > .value,
.ui.dark.green.statistic > .value {
    background-color: hsla(132, 100%, 39%,  0.3) !important;
    border-color: hsla(132, 100%, 29%, 1) !important;
}

.ui.green.light.statistics .statistic > .value,
.ui.statistics .green.light.statistic > .value,
.ui.light.green.statistic > .value {
    background-color: hsla(132, 100%, 59%,  0.31) !important;
    border-color: hsla(132, 100%, 49%, 1) !important;
}


/*Orange*/
.ui.orange.statistics .statistic > .value,
.ui.statistics .orange.statistic > .value,
.ui.orange.statistic > .value {
    background-color: hsla(22, 100%, 66%, 0.3) !important;
    border-color: hsla(22, 100%, 56%, 1) !important;
}

.ui.orange.darker.statistics .statistic > .value,
.ui.statistics .darker.orange.statistic > .value,
.ui.darker.orange.statistic > .value {
    background-color: hsla(22, 100%, 46%, 0.3) !important;
    border-color: hsla(22, 100%, 36%, 1) !important;
}

.ui.orange.dark.statistics .statistic > .value,
.ui.statistics .dark.orange.statistic > .value,
.ui.dark.orange.statistic > .value {
    background-color: hsla(22, 100%, 56%, 0.3) !important;
    border-color: hsla(22, 100%, 46%, 1) !important;
}

.ui.orange.light.statistics .statistic > .value,
.ui.statistics .light.orange.statistic > .value,
.ui.light.orange.statistic > .value {
    background-color: hsla(22, 100%, 76%, 0.3) !important;
    border-color: hsla(22, 100%, 66%, 1) !important;
}

.ui.orange.lighter.statistics .statistic > .value,
.ui.statistics .lighter.orange.statistic > .value,
.ui.lighter.orange.statistic > .value {
   background-color: hsla(22, 100%, 86%, 0.3) !important;
    border-color: hsla(22, 100%, 76%, 1) !important;
}

/*Purple*/
.ui.purple.statistics .statistic > .value,
.ui.statistics .purple.statistic > .value,
.ui.purple.statistic > .value {
    background-color: hsla(298, 100%, 49%,  0.3) !important;
    border-color: hsla(298, 100%, 39%, 1) !important;
}

.ui.purple.darker.statistics .statistic > .value,
.ui.statistics .purple.darker.statistic > .value,
.ui.darker.purple.statistic > .value {
    background-color: hsla(298, 100%, 29%,  0.31) !important;
    border-color: hsla(298, 100%, 19%, 1) !important;
}

.ui.purple.dark.statistics .statistic > .value,
.ui.statistics .purple.dark.statistic > .value,
.ui.dark.purple.statistic > .value {
    background-color: hsla(298, 100%, 39%,  0.3) !important;
    border-color: hsla(298, 100%, 29%, 1) !important;
}

.ui.purple.light.statistics .statistic > .value,
.ui.statistics .purple.light.statistic > .value,
.ui.light.purple.statistic > .value {
    background-color: hsla(298, 100%, 59%,  0.31) !important;
    border-color: hsla(298, 100%, 49%, 1) !important;
}



.statistic .value.circle {
    border: 3px solid hsla(202, 100%, 58%, 1) !important;
    border-radius: 50%;
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 94px!important;
    vertical-align: middle;
    text-align: center;
    font-style: normal;
    margin: auto auto;
}

.statistic .value.circle.large {
    width: 120px;
    height: 120px;
    line-height: 114px!important;
}

.statistic:hover > .value.circle:hover,
.dark.blue.statistic:hover > .value.circle:hover,
.darker.blue.statistic:hover > .value.circle:hover,
.light.blue.statistic:hover > .value.circle:hover,
.dark.red.statistic:hover > .value.circle:hover,
.darker.red.statistic:hover > .value.circle:hover,
.light.red.statistic:hover > .value.circle:hover,
.dark.green.statistic:hover > .value.circle:hover,
.darker.green.statistic:hover > .value.circle:hover,
.light.green.statistic:hover > .value.circle:hover,
.light.red.statistic:hover > .value.circle:hover,
.dark.orange.statistic:hover > .value.circle:hover,
.darker.orange.statistic:hover > .value.circle:hover,
.light.orange.statistic:hover > .value.circle:hover,
.lighter.orange.statistic:hover > .value.circle:hover,
.dark.purple.statistic:hover > .value.circle:hover,
.darker.purple.statistic:hover > .value.circle:hover,
.light.purple.statistic:hover > .value.circle:hover,
.lighter.purple.statistic:hover > .value.circle:hover{
    border-color:black!important;
    color:black!important;
    cursor:pointer;
} 
@media only screen and (max-width: 1180px) {
    /*.ui.four.statistics,*/
    .ui.six.statistics {
        display: block;
    }

    /*.ui.four.statistics {
        margin: 0em 0em 0em;
    }*/
        .ui.five.statistics .statistic {
            min-width: 49% !important;
            margin: 0em 0em 2em;
        }
        .ui.four.statistics .statistic {
            min-width: 49% !important;
            margin: 0em 0em 2em;
        }

    .ui.six.statistics .statistic {
        min-width: 32% !important;
        margin: 0em 0em 2em;
    }



    .ui.secondary.pointing.menu .item {
            padding: 0.71428571em 0.92857143em!important;

    }
}




.ui.flow.statistics {
    margin: 0em 0em -2em;
}

    .ui.flow.statistics .five.statistic {
        min-width: 20%;
        margin: 0em 0em 2em;
    }



    .ui.flow.statistics .four.statistic {
        min-width: 25%;
        margin: 0em 0em 2em;
    }


    .ui.flow.statistics .three.statistic {
        min-width: 33.33333333%;
        margin: 0em 0em 2em;
    }


    .ui.flow.statistics .two.statistic {
        min-width: 50%;
        margin: 0em 0em 2em;
    }



    .ui.flow.statistics .one.statistic {
        min-width: 100%;
        margin: 0em 0em 2em;
    }