:root {
    --main-dark-color: #000000;
    --main-middle-color: #8CC5F4;
    --main-light-color: #D3D3D3;
    --main-disabled-color: #ADADAD;
}
@font-face {
    font-family: 'GOST Common';
    src: url('fonts/gost_common.eot'); /* IE 9 Compatibility Mode */
    src: url('fonts/gost_common.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
        url('fonts/gost_common.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/gost_common.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
        url('fonts/gost_common.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/gost_common.svg#gost_common') format('svg'); /* Chrome < 4, Legacy iOS */
}

* {
    box-sizing: border-box;
    font-family: GOST Common;
    font-size: 16px;
}
html {
    background:#000;
    margin:0;
    padding:0;
    height: 100%;
}
body {
    background: #f1f1f1;
    margin:0;
    padding:0;
    position:relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.android-bottom-spacer {
    height:40px;
    background:#000;
    flex:0 0 40px;
}
.android-top-spacer {
    height:30px;
    background:#000;
    flex:0 0 30px;
}
header {
    display:flex;
    flex-direction: row;
    border-bottom: 1px solid var(--main-dark-color);
    padding: 0;
    width: 100%;
}
section {
    flex: 1 1 auto;
    padding:10px;
    overflow-y: auto;
}
footer {
    width:100%;
    line-height:20px;
    border-top: 1px solid var(--main-dark-color);
    font-size:12px;
    text-align: center;
    color: var(--main-dark-color);
}

body .div_loading {
    display:none;
}
body.loading .div_loading {
    display:block;
    position: absolute;
    left:0;
    width:100%;
    height:100%;
    top:0;
    bottom:0;
    right:0;
    background:rgba(20,20,20,0.7) url('/template/spinner.gif') no-repeat center center;
    background-size:140px;
    z-index:1000;
}
body.loading .div_loading_text {
    position: absolute;
    top:50%;
    color: var(--main-light-color);
    padding-top: 90px;
    text-align: center;
    width: 100%;
    font-size: 30px;
}


header div.info {
    display:block;
    margin:0 0 0 auto;
    padding:0 5px;
    line-height:36px;
    text-decoration: none;
    color: var(--main-dark-color);
}

.tool_row {
    text-align: center;
}
.tool {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-size:contain;
    background-repeat: no-repeat;
    margin: 10px;
    vertical-align: bottom;
    font-size: 30px;
}
.tool span {
    font-size: 30px;
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
    padding: 0 5px;
    display: inline-block;
    box-shadow: 0 0 10px #FFF;
}
.tool.disabled {
    opacity: 0.2;
    cursor: not-allowed;
}
.tool.cutter {
    background-image: url('/template/images/cutter.png');
}
.tool.drill {
    background-image: url('/template/images/drill.png');
}
.tool.mill {
    background-image: url('/template/images/mill.png');
}
.tool.threadmill {
    background-image: url('/template/images/threadmill.png');
}


.btn {
    border-radius: 0;
}
.btn-secondary {
    background: transparent;
    color:#000;
    border:none;
}
.btn-outline-secondary {
    border: 1px solid #000;
}
.border-right {
    border-right: 1px solid #000;
}
.border-left {
    border-left: 1px solid #000;
}

.modal-dialog {
    margin: 20vh auto 0px auto
}

.page-link {
    color:#000;
}