@font-face {
    font-family: Russo one;
    src: url(../assets/fonts/RussoOne-Regular.ttf);
}

html, body, viewport{
    overflow:hidden;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

/*
 Сцена
*/
.stage {
    background:url('../assets/background.png');
    background-size: 100% 100%;
}

/*
 Стол
*/
.table {
    overflow:hidden;
    display:inline-block;
}

.table > .new {
    width:50%;
    height:100%;
    overflow:hidden;
}

.table > .ready {
    width:50%;
    height:100%;
    overflow:hidden;
}
/*
 Новый элемент заказа
*/

.header {
    overflow:hidden;
    width:100%;
    height:150px;
}

.header > .new > .container {
    display:inline-block;
    margin:0px 40px;
}

.header > .new {
    height:100%;
    width:50%;
    background:url('../assets/headerNew.png');
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header > .new > .container > #name {
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    white-space: nowrap;
    font-family:'Russo One';
    font-size:90px;
    color:#ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header > .ready > .container {
    display:inline-block;
    margin:0px 40px;
}

.header > .ready {
    height:100%;
    width:50%;
    background:url('../assets/headerReady.png');
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header > .ready > .container > #name {
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    white-space: nowrap;
    font-family:'Russo One';
    font-size:90px;
    color:#ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*
 Новый элемент заказа
*/

.new-order {
    background:url(../assets/itemNew.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:100%;
    height:155px;
}

.new-order-transition {
    -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.new-order-deleted-transition {
    -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.new-order > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow:hidden;
    margin:0 40px;
}

.new-order > .container > #top {
    display: flex;
    align-items: baseline;
}

.new-order > .container > #top > .id {
    white-space: nowrap;
    font-family:'Russo One';
    text-align:left;
    font-size:90px;
    color:#ffffff;
}

.new-order > .container > #top > .name {
    white-space: nowrap;
    font-family:'Russo One';
    text-align:left;
    font-size:90px;
    color:#ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left:40px;
}

.new-order > .container > .comment {
    margin-top: -20px;
    font-family:'Russo One';
    text-align:left;
    font-size:40px;
    color:#ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 Готовый элемент заказа
*/

/*
 Новый элемент заказа
*/

.ready-order {
    background:url(../assets/itemReady.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:100%;
    height:155px;
}

.ready-order-transition {
    -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.ready-order-deleted-transition {
    -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.ready-order > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow:hidden;
    margin:0 40px;
}

.ready-order > .container > #top {
    display: flex;
    align-items: baseline;
}

.ready-order > .container > #top > .id {
    white-space: nowrap;
    font-family:'Russo One';
    text-align:left;
    font-size:90px;
    color:#ffffff;
}

.ready-order > .container > #top > .name {
    white-space: nowrap;
    font-family:'Russo One';
    text-align:left;
    font-size:90px;
    color:#ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left:40px;
}

.ready-order > .container > .comment {
    margin-top: -20px;
    font-family:'Russo One';
    text-align:left;
    font-size:40px;
    color:#ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
}