@font-face {
    font-family: DsDigi;
    src: url('fonts/DS-DIGI.TTF')
}

@font-face {
    font-family: DsDigiItalic;
    src: url('fonts/DS-DIGI-I.TTF')
}

@font-face {
    font-family: CalibriSpecial;
    src: url('fonts/CalibriSpecial.ttf')
}

html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Calibri, sans-serif;
    color: #EEEEEE;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #1B1B1B;
    overflow: hidden;
}

#container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 5%;
    box-sizing: border-box;
}

#heading {
    width: 100%;
    height: 8%;
    margin: 0;
    padding: 0;
    vertical-align: center;
}

#heading > div {
    float: left;
    width: 40%;
    height: 100%;
    color: #FFFFFF;
    font-family: Calibri, sans-serif;
    text-transform: uppercase;
    padding: 0 0;
    box-sizing: border-box;
}

#heading > div:nth-child(2) {
    text-align: right;
    width: 60%;
}

.table-wrap {
    display: table;
    width: 100%;
    height: 100%;
}

.table-wrap > span {
    display: table-cell;
    vertical-align: middle;
}

.slot {
    width: 100%;
    height: 17%;
    margin: 0;
    padding: 1% 0;
    box-sizing: border-box;
}

.item {
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
        center top,
        #1A1A1A 0%, #101010 100%
    );
    background:-webkit-gradient(
        linear,
        left top, left bottom,
        from(#1A1A1A), to(#101010)
    );
    border-radius: 5px;
    border: 1px solid #404040;
    box-sizing: border-box;
    font-family: DsDigiItalic, sans-serif;
    line-height: 90%;
}

.item > div {
    float: left;
    height: 100%;
    padding: 0 3%;
    box-sizing: border-box;
}

.customer {
    width: 33%;
    text-align: left;
    color: #F06B00;
}

.arrow {
    width: 34%;
    text-align: center;
    font-family: DsDigi, sans-serif;
    color: #39B54A;
}

.desk {
    width: 33%;
    text-align: right;
    color: #39B54A;
}

div.transparent {
    opacity: 0 !important;
}

#gong {
    visibility: hidden;
}

/*  LIGHT STYLE */

.light .item {
    background:-moz-linear-gradient(
        center top,
        #FFFFFF 0%, #F7F7F7 100%
    );
    background:-webkit-gradient(
        linear,
        left top, left bottom,
        from(#FFFFFF), to(#F7F7F7)
    );
    border: 1px solid #ABABAB;
    font-family: Calibri, sans-serif;
}

.light #heading > div {
    color: #221E1F;
}

#container.light {
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
}

.light .arrow {
    font-family: CalibriSpecial, sans-serif;
}

/*  BLUE STYLE */

#container.blue {
    background-image: url(images/bg-blue.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    font-family: Calibri, sans-serif;
}

.blue .item {
    background:-moz-linear-gradient(
        center top,
        #02488E 0%, #02488E 100%
    );
    background:-webkit-gradient(
        linear,
        left top, left bottom,
        from(#02488E), to(#02488E)
    );
    border: 1px solid #ABABAB;
    font-family: CalibriSpecial, sans-serif;
}

.blue .customer {
    color:#ED9E6B;
}

.blue .arrow {
    font-family: CalibriSpecial, sans-serif;
    color: #EEEEEE;
}

.blue .desk {
    color: #EEEEEE;
}

#column_1.blue, #column_2.blue{
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}