.s-menu { 
    width: auto;
    height: auto;
    padding: 5px;
    margin: 0 0 0 30px;
    display: table;
}
.s-menu .s-menu-btn{
float: left;
margin-left: 15px;
} 

.s-menu .button{
    min-width: 100px !important;
    padding: 10px 2px !important;
}
.seat-row{ 
    padding: 10px;
    margin: auto;
    display: table;
}
.seat{ 
    padding: 0 8px;
    margin: 0 2px;
    color: #1b1b1b;
    text-align: center; 
    float: left;
}
.seat-row-title{ 
    padding: 0 8px;
    margin: 0 10px 0 2px ;
    color: #ebebeb;
    text-align: center; 
    float: left;
    background: var(--main_color);
    background: linear-gradient(-45deg, var(--main_color) 0%, var(--main_color_2) 100%);
}

.color-box{
    width: auto;
    height: 100px;
    cursor: pointer;

}
.colordf:hover{
    background-color: #be2df3; 
    color: #ffffff; 
}
.color1:hover{
    background-color: #be2df3; 
    color: #ffffff; 
}
.color2:hover{
    background-color: #a83707; 
    color: #ffffff; 
}
.color3:hover{
    background-color: #c2c2c2; 
    color: #ffffff; 
}
.color4:hover{
    background-color: #139e09; 
    color: #ffffff; 
}
.color5:hover{
    background-color: #fa419d; 
    color: #ffffff; 
}
.color6:hover{
    background-color: #fad91d; 
    color: #ffffff; 
}
.color7:hover{
    background-color: #f83033; 
    color: #ffffff; 
}
.color8:hover{
    background-color: #5052f5; 
    color: #ffffff; 
}
.colordf{
    background-color: #8300B4;
    color: #FFF;
}
.color1{
    background-color: #8300B4;
    color: #FFF;
}
.color2{
    background-color: #6A2A0E;
    color: #FFF;
}
.color3{
    background-color: #919191;
    color: #FFF;
}
.color4{
    background-color: #1A7113;
    color: #FFF;
}
.color5{
    background-color: #E40B76;
    color: #FFF;
}
.color6{
    background-color: #C7A909;
    color: #FFF;
}
.color7{
    background-color: #D70A0F;
    color: #FFF;
}
.color8{
    background-color: #080ab3;
    color: #FFF;
}