@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

* {
    box-sizing: border-box;
  }

body{
    background-color: #242333;
    color: #fff;
    font-family: 'Lato', sans-serif;
} 

.concert-container{
    margin:0 auto;
    display: flex;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 2em;
}

.concert-container select{
    background-color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    margin-left: 10px;
    padding: 5px 15px 5px 15px;
    appearance: none;
}

.seats-type{
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    width:350px;
    background: rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 2em;
    text-decoration: none;
    list-style-type: none;
}

.seats-type li{
    display: flex;
}


.container-stage{
    margin:0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.concert{

    width:300px;
    height: 350px;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}



.left-stage, .right-stage{
    width:20%;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}



.stage{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:50%;
    height: auto;
  
}

.part1{
    max-width: 100%;
    width:100%;
    height: 100px;
    border-radius:5px;
    background-color: #fff;
    box-shadow: 3px 1px 3px rgba(255, 255, 255, 0.7);
}

.part2{
    width:100%;
    height: 150px;
    display: flex;
    justify-content: space-between;

}

.vip-left-seats , .middle-stage, .vip-right-seats {
    width:30%;
}

.vip-left-seats , .vip-right-seats{
    height: auto;
    padding-top: .3em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}

.vip-Lseats, .vip-Rseats, .left-seats, .right-seats{
    height: 15px;
    width: 12px;
    margin: 3px;
}

.left-seats, .right-seats, .front-seats{
  background-color: #444451;
}

.vip-Lseats, .left-seats{
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
}

.vip-Rseats, .right-seats{
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}

.middle-stage{
    height: 150px;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}


.part3{
    width:85%;
    height: 120px;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    margin-top:-.5em;
}

.front-stage{
    width:300px;
    height: 70px;
    padding:.6em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.front-seats{
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    height: 12px;
    width: 15px;
    margin: 3px;
}

.seat:not(.occupied):hover{
    transform: scale(1.2);
    cursor: pointer;
}



.text{
    margin:0 auto;
    display: flex;
    justify-content: center;
    margin-top: 1em;
    font-size: 1.3rem;
}

.vip{
    background-color: rgb(255, 47, 47);
}


.selected{
    background-color: #6feaf6;
}

.occupied{
    background-color: white;
}

.text{
    visibility: hidden;
}

#count{
    margin:0 .3em;
    color: #6feaf6;
}

#total{
    color:#6feaf6 ;
}


@media(max-width:500px){
 .text{
     font-size: .8rem;
 }
}