@import "font.css";

body {
    font-family: Roboto, KhmerOSbattambang, sans-serif;
    font-size: 15px;
    font-weight: 300;
    background: #E9EBEE;
}

html, body, .container-table {
    height: 100%;
}

.container-table {
    display: table;
}

.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

.screen table td {
    padding: 15px;
    width: 150px;
    height: 150px;
    position: relative;
}

.screen table td .box {
    background: transparent;
    width: 150px;
    height: 150px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    border-radius: 2px;
    border: 1px solid #444;
    color: white;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.box a {
    color: rgba(255, 255, 255, 1);
}

.box a:hover {
    text-decoration: none;
}

.title {
    font-size: 34px;
    font-family: Roboto, sans-serif;
    color: #222;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.screen .image {
    margin-bottom: 8px;
}
.screen .image img{
    width: 50px;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    vertical-align: middle;
}

.screen table td.middle .box {
    width: 200px;
    height: 200px;
    position: relative;
    z-index: 1;
}
.bg-light-blue{
    background: #ADBAD4!important;
}
.bg-blue {
    background: #3367D6 !important;
}

.bg-green {
    background: #217346 !important;
}

.bg-orange {
    background: #F5B80F !important;
}

.bg-red {
    background: #F44336 !important;
}

.bg-green {
    background: #71A830 !important;
}

.bg-light-green {
    background: #85CB35 !important;
}

.bg-pink {
    background: #FF6398 !important;
}


.bg-black {
    background: #333 !important;
}

.bg-gray {
    background: gray !important;
}

.screen td.middle .box:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    right: -120px;
    height: 1px;
    border-top: 1px solid #808080;
    z-index: -1;
}

.screen td.middle .box:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    left: -120px;
    height: 1px;
    border-top: 1px solid #808080;
    z-index: -1;
}

.screen td.middle-right .box:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    left: -93px;
    height: 1px;
    border-top: 1px solid #808080;
    z-index: -1;
}

.screen td.middle-left .box:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    right: -93px;
    height: 1px;
    border-top: 1px solid #808080;
    z-index: -1;
}

.screen td.top-left .box:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    right: -132px;
    height: 1px;
    border-top: 1px solid #808080;
    z-index: -1;
}

.screen td.top-right .box:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    left: -132px;
    height: 1px;
    border-top: 1px solid #808080;
    z-index: -1;
}

.screen td.bottom-left .box:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    right: -132px;
    height: 1px;
    border-top: 1px solid #808080;
    z-index: -1;
}

.screen td.bottom-right .box:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    left: -132px;
    height: 1px;
    border-top: 1px solid #808080;
    z-index: -1;
}

.screen td.middle-left.b .box:after,
.screen td.middle-right.b .box:before {
    top: 73px;
}

.middle-line-left {
    position: absolute;
    height: 90%;
    width: 1px;
    background: #808080;
    left: -120px;
}

.middle-line-right {
    position: absolute;
    height: 90%;
    width: 1px;
    background: #808080;
    right: -120px;
}

.top-line {
    position: absolute;
    z-index: 2;
    width: 1px;
    background: #808080;
    height: 86%;
    top: -170px;
}

.bottom-line {
    position: absolute;
    z-index: 2;
    width: 1px;
    background: #808080;
    height: 86%;
    bottom: -171px;
}