/* https://color.adobe.com/create/color-wheel/?base=2&rule=Monochromatic&selected=4&name=My%20Color%20Theme&mode=rgb&rgbvalues=0.17972473935894973,0.30406031865629857,0.5,0.6594494787178995,0.7916562131964631,1,0.35944947871789945,0.6081206373125971,1,0.0014128559043085631,0.1949717379336841,0.5,0.28755958297431955,0.48649650985007775,0.8&swatchOrder=0,1,2,3,4 */

@font-face {
    font-family: 'thin';
    src: url('res/distproth-webfont.eot');
    src: url('res/distproth-webfont.eot?#iefix') format('embedded-opentype'),
         url('res/distproth-webfont.woff2') format('woff2'),
         url('res/distproth-webfont.woff') format('woff'),
         url('res/distproth-webfont.ttf') format('truetype'),
         url('res/distproth-webfont.svg#district_prothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {
    box-sizing:border-box;
}

html, body {
    font-family:sans-serif;
    margin:0;
}

.sorter {
    background:#f4f4f4;
    border:1px solid #bbb;
    height:270px;
    margin:20px auto;
    padding:10px;
    position:relative;
    width:960px;
}

.sorter-sidebar {
    height:230px;
    position:absolute;
    right:10px;
    top:10px;
    width:160px;
}

.sorter-svg {
    background:#fff;
    border:1px solid #ccc;
    height:200px;
    left:10px;
    position:absolute;
    top:10px;
    width:770px;
}

.sorter-svg .marker {
    fill:#bbb;
}

.sorter-svg .marker text {
    fill:#2E4E7F;
    font-size:10px;
}

.sorter-properties {
    height:40px;
    left:10px;
    position:absolute;
    top:220px;
    width:770px;
}

.sorter-properties .property {
    border-right:1px solid #ddd;
    float:left;
    text-align:center;
    width:128px;
}

.sorter-properties .p6 {
    border:0;
}

.sorter-properties .property .title {
    color:#777;
    font-size:10px;
}

.sorter-properties .property .value {
    font-size:13px;
    margin-top:10px;
}

.controls-container {
    height:45px;
    padding-bottom:10px;
    text-align:center;
}

.controls-container button {
    border:1px solid #fff;
    background:#d4d4d4;
    color:#2E4E7F;
    cursor:pointer;
    font-size:12px;
    height:30px;
    line-height:30px;
    margin:0 2px;
    text-align:center;
    transition:background 0.2s ease, border 0.2s ease;
    vertical-align: top;
    width:30px;
}

.controls-container button:hover {
    background:#bbb;
    border:1px solid #2E4E7F;
}

.controls-container button:focus {
    outline:0;
}

.controls-container .stat {
    font-size:13px;
    font-weight:bold;
    line-height:30px;
}

.message-container {
    border-top:1px solid #ddd;
    height:100px;
    line-height:20px;
    text-align:right;
}

.message-container .message {
    border-bottom:1px solid #ddd;
    font-size:12px;
}

.range-container {
    height:50px;
    margin-top:40px;
    text-align:center;
}

.range-container input {
    margin-bottom:5px;
}

.range-container .msg {
    font-size:11px;
}