* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Noto Sans Lao';
    src: url(NotoSansLao.ttf);
}

body, input, button {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, 'Noto Sans Lao';
}

table {
    font-size: .8rem;
    width: 100%;
    overflow-x: scroll;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: .5rem;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
}

.log-con {
    overflow-x: auto;
}

.text-right {
    text-align: right;
}

.text-green {
    color: mediumseagreen;
}

.text-red {
    color: red;
}

.text-bold {
    font-weight: bold;
}

.btn-green {
    background-color: mediumseagreen;
    color: #fff;
}

.btn-blue {
    background-color: dodgerblue;
    color: #fff;
}

.btn-purple {
    background-color: purple;
    color: #fff;
}

.btn-orange {
    background-color: orangered;
    color: #fff;
}

.btn-red {
    background-color: red;
    color: #fff;
}

.con-1-col {
    display: grid;
    grid-template-columns: 1fr;
    padding: .5rem;
}

.screen-title {
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    background-color: #333;
    color: #fff;
    width: 100%;
    padding: 1rem 0;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}

.screen-title-back {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    background-color: #333;
    color: #fff;
    width: 100%;
    padding: 1rem 0;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}

.btn {
    border: 0;
    padding: .5rem;
    border-radius: 5px;
    cursor: pointer;
}

.back-btn {
    padding-left: .5rem;
    cursor: pointer;
    font-size: 1.5rem;
}

.header-info-con {
    padding: .5rem;
    background-color: #ddd;
    display: flex;
    flex-direction: column;
}

.header-info-con-2-col {
    padding: .5rem;
    background-color: #ddd;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.header-log-con {
    padding: .5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.staff-screen {
    display: none;
}

.staff-con {
    padding: .5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.staff-item {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid #333;
    cursor: pointer;
    gap: .5rem;
}

.staff-item button {
    border: 0;
    padding: .5rem;
    border-radius: 5px;
    cursor: pointer;
}

.saleman-screen {
    display: none;
}

.saleman-con {
    padding: .5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.saleman-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: #000;
    border: 1px solid #333;
    border-radius: 5px;
    cursor: pointer;
}

.saleman-con input[type=text] {
    outline: none;
    border: 1px solid #333;
    border-radius: 5px;
    padding: .5rem;
    text-align: center;
    font-size: 16px;
}

.show-success-item {
    margin: .5rem;
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: mediumseagreen;
    color: #fff;
    padding: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

.show-sell-log-screen {
    margin: .5rem;
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: dodgerblue;
    color: #fff;
    padding: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

.sell-log-screen {
    display: none;
}

.sell-log-con {
    overflow-x: auto;
}

.number-screen {
    display: none;
}

.number-screen-action-con {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding: .5rem;
}

.number-con {
    padding: .5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.number-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: space-between;
    color: #000;
    border: 1px solid #333;
    padding: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

.success-screen {
    display: none;
}

.success-con {
    padding: .5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    overflow-x: auto;
}

.success-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: space-between;
    color: #000;
    border: 1px solid #333;
    padding: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

.sell-detail-screen {
    display: none;
}

.sell-detail-con {
    overflow-x: auto;
}

.sell-detail-info-con {
    margin: .5rem;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: 5px;
}

.staff-all-screen {
    display: none;
}

.staff-all-con {
    padding: .5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    overflow-x: auto;
}

.staff-all-item {
    display: flex;
    flex-direction: column;
    color: #000;
    border: 1px solid #333;
    padding: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

.price-screen {
    display: none;
}

.price-con {
    padding: .5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.price-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: #000;
    border: 1px solid #333;
    border-radius: 5px;
    cursor: pointer;
}

.price-item-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: #000;
    border: 1px solid #333;
    border-radius: 5px;
    cursor: pointer;
}

.price-custom-input {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 .2rem ;
}

.price-custom-input button {
    min-width: 60px;
}
.price-item-custom  input {
    padding: .5rem;
    width: 100%;
    text-align: center;
    font-size: 1rem;
}