/**
* My application CSS
*
**/


/*
 */
html, body {
    background: #f9f9f9;
}

/*
 * Collapsed panel indicator
 */
div[aria-expanded=false] .fa-chevron-up,
tr[aria-expanded=false]>td>i.fa-chevron-up {
    display: none;
}
div[aria-expanded=true] .fa-chevron-up,
tr[aria-expanded=true]>td>i.fa-chevron-up {
    display: block;
}
div[aria-expanded=false] .fa-chevron-down,
tr[aria-expanded=false]>td>i.fa-chevron-down {
    display: block;
}
div[aria-expanded=true] .fa-chevron-down,
tr[aria-expanded=true]>td>i.fa-chevron-down {
    display: none;
}

/*
 * Table tickets - make ellipsis for some long text
 */
.table-tickets .text {
    position: relative;
}
.table-tickets .text span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: absolute;
    left: 0;
    right: 0;
}
.text:before {
    content: '';
    display: inline-block;
}

/*
 * Counters
 */
.counter {
    float: left;
    position: relative;
    display: block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 5px;

    margin: 5px 1% 5px 1%;
    padding: 5px;

    width: 48%;
    height: 100px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
    color: #000000;
}

/* On counters page */
.counter.large {
    width: 98%; margin-left: 1%; margin-right: 1%;
}
.counter.half {
    width: 48%; margin-left: 1%; margin-right: 1%;
}
.counter.third {
    width: 31.3%; margin-left: 1%; margin-right: 1%;
}
.counter.quarter {
    width: 23%; margin-left: 1%; margin-right: 1%;
}

.counter_line_break {
    clear: left;
    height: 5px !important;
}

/* Counter text zone */
.counter .inner {
    padding: 10px;
    position: absolute;
    top: 0px; left: 0px;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1;
}

.counter p {
    z-index: 5;
    font-size: 16px;
    text-shadow: none;
    margin: 0;
}

.counter p.value {
    font-size: 32px;
    font-weight: bold;
    white-space: nowrap;
}

/* Counter icon zone */
.counter i {
    font-size: 64px;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 0;
    color: rgba(0, 0, 0, 0.15);
}

.counter:hover {
    text-decoration: none;
    color: #f9f9f9;
}
.counter p:hover {
    text-decoration: none;
    color: #f9f9f9;
}
.counter:hover i {
    animation-name: iconTransformation;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: iconTransformation;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: iconTransformation;
    -moz-animation-duration: .5s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: forwards;
}
.counter-update i {
    color: rgba(0, 0, 0, 0.50);
    animation-name: updateTransformation;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: iconTransformation;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: iconTransformation;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: forwards;
}

@keyframes updateTransformation {
    from {
        font-size: 64px;
    }
    to {
        font-size: 76px;
    }
}
@keyframes iconTransformation {
    from {
        font-size: 64px;
    }
    to {
        font-size: 88px;
    }
}
@keyframes iconTransformation2 {
    from {
        font-size: 24px;
    }
    to {
        font-size: 32px;
    }
}
@-webkit-keyframes iconTransformation {
    from {
        font-size: 64px;
    }
    to {
        font-size: 88px;
    }
}
@-webkit-keyframes iconTransformation2 {
    from {
        font-size: 24px;
    }
    to {
        font-size: 32px;
    }
}
@media screen and (max-width: 1024px) {
    .counter {
        text-align: left;
    }
    .counter i {
        font-size: 48px;
    }
    .counter p {
        font-size: 16px;
    }
    .counter p.value {
        font-size: 32px;
    }
}
@media screen and (max-width: 768px) {
    .counter {
        text-align: center;
    }
    .counter i {
        font-size: 32px;
    }
    .counter p {
        font-size: 16px;
    }
    .counter p.value {
        font-size: 24px;
    }
}