* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
  
html,
body {
    -webkit-text-size-adjust: 100%;
    width:100%;
    padding:0;
    margin:0;
    color: #29292a;
    font-family: 'DB Heavent';
}

img {
    width: 100%;
    height: auto;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

@media screen and ( min-width: 300px ) {
    .page-container {
        display: block;
        width: 100%;
        margin: 0px auto;
        padding: 0px;
    }

    .screen-layout {
        display: block;
        width: 70%;
        padding: 30px;
        background-color: #29292a;
        color: #ffffff;
        margin: 20px auto;
        text-align: center;
    }

    .seat-layout {
        display: block;
        width: 100%;
        padding: 0px;
        margin: 20px auto;
    }

    .seat-row {
        display: flex;
        width: 100%;
        margin: 0px auto;
        text-align: center;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0px;
    }

    .normal-row-letter,
    .vip-row-letter,
    .vvip-row-letter,
    .seating,
    .seating2 {
        border: 1px solid #000000;
        text-align: center;
        margin: 0px auto;
        font-size: clamp(4px, 1vw, 14px);
        padding: 5px;
    }

    .normal-row-letter {
        flex: 0 1 80px;
        background-color: #509ff7;
        flex-shrink: 0; 
    }

    .vip-row-letter {
        flex: 0 1 80px;
        background-color: #f3f85c;
        flex-shrink: 0; 
    }

    .vvip-row-letter{
        flex: 0 1 80px;
        background-color: #e64328;
        color: #ffffff;
    }

    .seating {
        width: calc((100% - 2*80px)/25);
        flex-shrink: 0; 
        margin: 0px 0px;
    }

    .seating2 {
        width: calc((100% - 2*50px)/10);
        flex-shrink: 0; 
    }

    a.seating {
        width: calc((100% - 2*80px)/25);
        flex-shrink: 0; 
        margin: 0px 0px;
        text-decoration: none;
        color: #000000;
    }

    a.seating2 {
        width: calc((100% - 2*50px)/10);
        flex-shrink: 0; 
        text-decoration: none;
        color: #000000;
    }

    .booked {
        background-color: #69df7c;
    }

    .white {
        background-color: #ffffff;
    }

    .leader {
        background-color: #faab46;
    }

    .page-menu {
        display: block;
        padding: 20px 10px;
        background-color: #000000;
    }

    .normal-btn {
        display: block;
        background-color: #ffffff;
        color: #000000;
        text-decoration: none;
        text-align: center;
        width: 100px;
        padding: 10px 20px;
        border-radius: 10px;
    }

    .book-panel {
        display: block;
        width: 80%;
        margin: 20px auto;
        border-radius: 10px;
        border: 1px solid #29292a;
        text-align: center;
    }

    .save-btn,
    .cancel-btn,
    .remove-btn {
        display: inline-block;
        width: 150px;
        background-color: #0000ff;
        text-align: center;
        border-radius: 10px;
        padding: 10px 20px;
        margin: 10px auto;
        text-decoration: none;
        color: #ffffff;
        vertical-align: middle;
    }

    .cancel-btn {
        background-color: #ff0000;
    }

    .remove-btn {
        background-color: #29292a;
        color: #ffffff;
    }

    input[type='text'] {
        display: block;
        width: 100%;
        padding: 10px 10px;
        font-size: 18px;
    }

    #notification {
        color: #ff0000;
    }

    .menu-btn {
        display: block;
        width: 60%;
        margin: 20px auto;
        padding: 10px 10px;
        border-radius: 10px;
        background-color: #1248d1;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
    }
}

@media screen and ( min-width: 1300px ) {

}