#milestones {
    position: absolute;
    z-index: 1499;

    top: 0;

    width: 100%;
}
#milestones >.milestones_window {
    position: relative;
    margin: 0 auto;

    width: 825px;
    height: 505px;

    background: #dedee0;

    box-shadow: 0 3px 4px black;
}
#milestones .head {
    position: relative;
    padding: 8px;
    width: calc(100% - 2 * 8px);
    height: 68px;
    font: 36px/40px 'NiagaraSolid';
    color: black;
}
#milestones .progress {
    position: relative;

    width: 100%;
    height: 40px;

    font: normal 20px/40px 'openSansBold';
    color: black;
    text-align: center;

    background: #c1c1c1;
}
#milestones .content {
    position: relative;

    width: 100%;
    height: calc(100% - 84px - 40px);

    overflow-y: scroll;
}
#milestones .head >.x {
    top: 8px;
    right: 8px;
}
#milestones .progress >.progress_bar {
    position: absolute;

    top: 0;
    right: 35px;

    margin: 5px 0;

    width: 204px;
    height: 28px;

    border-radius: 14px;
    border: 1px solid #ed2027;

    background: white;
    overflow: hidden;
}
#milestones .progress_bar >.progress_visual {
    position: absolute;

    top: -220px;
/*    left: -120px;
    left: -328px;*/
    left: -210px;

    width: 400px;
    height: 400px;
    background: #ed2027;
    transform-origin: 0 0;
    transform: rotate(30deg);
}
#milestones .progress_bar >.progress_value {
    position: absolute;

    width: 100%;
    font: normal 12px/28px 'openSansBold';
    color: white;
    text-align: center;
    text-shadow: 1px 1px 0 #ed2027, 1px -1px 0 #ed2027, -1px 1px 0 #ed2027, -1px -1px 0 #ed2027;
}
#milestones .content .left, #milestones .content .right {
    position: relative;
    display: inline-block;
    width: 35px;
    overflow: auto;
}
#milestones .content .center {
    position: relative;
    display: inline-block;

    width: calc(100% - 2 * 35px);
    overflow: hidden;
}
#milestones .content .arrow {
    position: relative;

    font: 74px/76px 'symbols';

    text-align: center;
}
#milestones .content .arrow:nth-child(odd) {
    color: #ed2027;
}
#milestones .content .arrow:nth-child(even) {
    color: black;
}
#milestones .content .arrow:hover {
    text-shadow: 0 0 8px white, 0 0 8px white;
    cursor: url("public_html/assets/images/cursorPointer.ico"), pointer;
    cursor: url("../images/cursorPointer.ico") 11 1, pointer;
}
#milestones .content .center >.row {
    position: relative;

    margin-left: 0;

    height: 76px;
    white-space: nowrap;
}
#milestones .content .center .row >.milestone {
    position: relative;
    display: inline-block;

    margin: 1px 3px;

    width: 61px;
    height: 74px;
    background: url("../images/trainingCamp/shield_icon.png") 0 0;
    transform: scale(0.8);
}
#milestones .content .center .row .milestone >.cover {
    position: absolute;

    left: 0;
    top: 0;
    width: 61px;
    height: 74px;
    background: url("../images/trainingCamp/shield_icon.png") -61px 0;
}
#milestones .content .center .row .milestone >.unit {
    position: absolute;

    left: 0;
    top: 0;

    margin: 6px 4px;

    width: 53px;
    height: 53px;

    background: url("../images/trainingCamp/tent_unit.png") 0 0;

    transform: scale(0.8);
}
#milestones .content .center .row .milestone >.value {
    position: absolute;

    bottom: 8px;
    left: 0;

    width: 100%;

    font: normal 14px/18px 'openSansBold';
    color: white;
    text-align: center;

    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;

    background: #ed2027;
}


#milestones .info {
    position: absolute;

    left: 0;
    top: 0;

    padding: 6px;

    font: normal 14px/14px 'openSansBold';
    color: black;

    white-space: nowrap;

    border-radius: 4px;
    border: 1px solid black;

    background: rgba(255,255,255, 0.75);

    pointer-events: none;
}