




.flip-over-wrap {
    min-height: 150px;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.info-box {
    position: absolute;
    display: block;
    min-height: 100%;
    width: 100%;
    box-shadow: none;
    border-radius: 6px;
    transition: all 0.3s;
    background: linear-gradient(0.25turn, #ff8871, #fe7295);
    z-index: 1;
}

.info-box__more{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 25px;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(0.25turn, #ff8871, #fe7295);
    transition: all 0.3s;
    overflow: auto;
    transform: rotateY(90deg);
    color: #fff;
}
.info-box__more a{
    color: #fff;
}
.flip-over .info-box__more{
    transform: rotateY(0deg);
    transition: all 0.3s;
    animation: flipOverMore 0.3s;
}
.flip-over .info-box{
    transform: rotateY(90deg);
    transition: all 0.3s;
    animation: flipOverMain 0.3s;
}
@keyframes flipOverMain {
    0%{
        transform: rotateY(0deg);
    }
    50%{
        transform: rotateY(90deg);
        z-index: 0;
    }
    100%{

    }
}
@keyframes flipOverMore {
    0%{

    }
    50%{
        transform: rotateY(90deg);
        z-index: 1;
    }
    100%{
        transform: rotateY(0deg);
    }
}


/*.info-box:hover {*/
    /*box-shadow: 15px 15px 10px rgba(0,0,0,0.4);*/
    /*transform: translate(-5px, -5px);*/
    /*transition: all 0.3s;*/
/*}*/
.info-box-icon {
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
    display: block;
    float: left;
    height: 90px;
    width: 90px;
    text-align: center;
    font-size: 45px;
    line-height: 90px;
    background: rgba(0,0,0,0.2);
    color: #fff;
}
.info-box-content {
    padding: 5px 10px;
    margin-left: 90px;
}
.progress-description, .info-box-text {
    display: block;
    font-size: 14px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 60px;
}
.progress-description {
    white-space: nowrap;
}
/*.info-box-text {*/
    /*text-transform: uppercase;*/
/*}*/
.info-box-number {
    display: block;
    font-weight: bold;
    font-size: 46px;
    position: absolute;
    bottom: 5px;
    right: 25px;
}
.progress-description {
    margin: 0;
}


.bg-aqua, .callout.callout-info, .label-info, .modal-info .modal-body {
    background-color: #00c0ef;
}
.bg-green, .callout.callout-success, .label-success, .modal-success .modal-body {
    background-color: #00a65a;
}
.bg-yellow, .callout.callout-warning, .label-warning, .modal-warning .modal-body {
    background-color: #f39c12;
}
.bg-red, .callout.callout-danger, .label-danger, .modal-danger .modal-body {
    background-color: #dd4b39;
}




.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}
.info-box .progress, .info-box .progress .progress-bar {
    border-radius: 0;
}
.info-box .progress {
    background: rgba(0,0,0,0.2);
    margin: 5px -10px 5px -10px;
    height: 2px;
}
.progress, .progress>.progress-bar {
     -webkit-box-shadow: none;
     box-shadow: none;
 }
.progress, .progress>.progress-bar, .progress .progress-bar, .progress>.progress-bar .progress-bar {
    border-radius: 1px;
}
.info-box .progress .progress-bar {
    background: #fff;
}
.info-box .progress, .info-box .progress .progress-bar {
    border-radius: 0;
}

.sickStatistics, .vacStatistics {
    background: #ffffff;
    padding: 10px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
}
.sickStatistics h3, .vacStatistics h3 {
    text-align: center;
}

