/* MAIN */
.container-app .box-app main.main-transaction-extend {
    grid-area: main;
    overflow: auto;
}

.container-app .box-app main.main-transaction-extend .box-main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 1em;
    width: calc(100% - 3em);
    height: 100%;
    /* max-width: 1050px; */
    margin: auto;
}

.container-app .box-app main.main-transaction-extend .box-main .top-transaction-extend {
    padding-top: 1em;
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .top-transaction-extend .alert {
    background-color: limeg;
    padding-right: 0;
    padding-left: 0;
    margin: 0 !important;
}

.container-app .box-app main.main-transaction-extend .box-main .top-transaction-extend .alert .box-alert {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0 1.5em;
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .top-transaction-extend .alert .text {
    display: flex;
    align-items: center;
}

.container-app .box-app main.main-transaction-extend .box-main .top-transaction-extend .alert .text p {
    font-family: "Poppins-Regular";
    font-size: 0.85rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .top-transaction-extend .alert .box-btn {
    display: flex;
    justify-content: center;
}

.container-app .box-app main.main-transaction-extend .box-main .top-transaction-extend .alert button {
    background-color: transparent;
    border: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr auto;
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .left {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .left h1 {
    font-family: 'Poppins-SemiBold';
    font-size: 1.3rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .left p {
    font-family: 'Poppins-Light';
    font-size: 0.7rem;
    color: #333;
    line-height: 1.3em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right form {
    width: 100%;
    display: grid;
    grid-template-columns: 150px auto;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right form input {
    width: 100%;
    font-family: 'Poppins-Light';
    font-size: 0.75rem;
    color: #333;
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right form input:focus {
    outline: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right form .group-action {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right form .group-action button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    padding: 0.65em;
    box-sizing: border-box;
    background-color: #4d96ff;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right form .group-action a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0.65em;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #4d96ff;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right button.btn-create-cico {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.85em;
    font-family: 'Poppins-Light';
    font-size: 0.8rem;
    color: #fff;
    padding: 0.25em 2.5em;
    box-sizing: border-box;
    background-color: #4d96ff;
    border: 0 !important;
    width: 100%;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right button.btn-create-cico:hover {
    background-color: #4d96ff;
    border: 0 !important;
}

/* Modal Create Cico */
.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-header h1 {
    font-family: 'Poppins-Medium';
    font-size: 0.8rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1em;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form {
    display: flex;
    flex-direction: column;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form .top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body .box-alert-modal .alert {
    background-color: limeg;
    padding-right: 0;
    padding-left: 0;
    margin: 0 !important;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body .box-alert-modal .alert .box-alert {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0 1.5em;
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body .box-alert-modal .alert .box-alert .text {
    display: flex;
    align-items: center;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body .box-alert-modal .alert .box-alert .text p {
    font-family: "Poppins-Regular";
    font-size: 0.85rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body .box-alert-modal .alert .box-btn {
    display: flex;
    justify-content: center;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body .box-alert-modal .alert .box-btn button {
    background-color: transparent;
    border: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form label {
    width: 100%;
    font-family: 'Poppins-Regular';
    font-size: 0.75rem;
    color: #333;
    border: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form input.input-modal {
    width: 100%;
    font-family: 'Poppins-Regular';
    font-size: 0.75rem;
    color: #333;
    border: none;
    border: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form input.input-modal:focus {
    box-shadow: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form select {
    font-family: 'Poppins-Light';
    font-size: 0.75rem;
    color: #333;
    border: 0.5px solid rgba(51, 51, 51, 0.3);
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form select:focus {
    border: 0.5px solid rgba(51, 51, 51, 0.5);
    box-sizing: border-box;
    box-shadow: none !important;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form p {
    font-family: 'Poppins-Regular';
    font-size: 0.7rem;
    color: #ff6b6b;
    line-height: 1.3em;
    padding: 0;
    padding-top: 10px;
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form .mb-3.barak .box-input {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body form .mb-3.barak .box-input p.search {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1em;
    border-radius: 5px;
    border: 1px solid rgba(51, 51, 51, 0.3);
    box-sizing: border-box;
    cursor: pointer;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-footer {
    display: grid;
    grid-template-columns: 1fr auto;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-footer .right button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.85em;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #fff;
    padding: 0.25em 2.5em;
    box-sizing: border-box;
    background-color: #4d96ff;
    border: 0 !important;
}

/* modal create cico */

/* lookup master company */
.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-header {
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-header h1 {
    font-family: 'Poppins-Medium';
    font-size: 0.8rem;
    color: #333;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1em;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .box-search-table input.search-table {
    width: 100%;
    font-family: 'Poppins-Light';
    font-size: 1rem;
    color: #333;
    text-align: center;
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .box-search-table input.search-table:focus {
    outline: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .modals-tables {
    width: 100%;
    /* background-color: turquoise; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables {
    width: 100%;
    height: 100%;
    max-height: 320px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: auto;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .thead {
    width: 100%;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .thead .tr {
    width: 100%;
    display: grid;
    grid-template-columns: 50px 100px repeat(4, 1fr);
    grid-template-rows: 1fr;
    justify-content: space-between;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .thead .tr p.itm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    background-color: tomato;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody {
    width: 100%;
    /* background-color: violet; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody .tr {
    width: 100%;
    display: grid;
    grid-template-columns: 50px 100px repeat(4, 1fr);
    grid-template-rows: 1fr;
    justify-content: space-between;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody .tr p.itm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #333;
    text-align: center;
    line-height: 1.35em;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-company .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody .tr p.itm.choose_itm span {
    width: 100%;
    color: #fff;
    font-family: "Poppins-Regular";
    padding: 0.5em 0;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
    background-color: #333;
}

/* lookup master company */

/* lookup master visitor */
.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-header {
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-header h1 {
    font-family: 'Poppins-Medium';
    font-size: 0.8rem;
    color: #333;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1em;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .box-search-table input.search-table {
    width: 100%;
    font-family: 'Poppins-Light';
    font-size: 1rem;
    color: #333;
    text-align: center;
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .box-search-table input.search-table:focus {
    outline: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .modals-tables {
    width: 100%;
    /* background-color: turquoise; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables {
    width: 100%;
    height: 100%;
    max-height: 320px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: auto;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .thead {
    width: 100%;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .thead .tr {
    width: 100%;
    display: grid;
    grid-template-columns: 50px 100px repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: space-between;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .thead .tr p.itm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    background-color: tomato;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody {
    width: 100%;
    /* background-color: violet; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody .tr {
    width: 100%;
    display: grid;
    grid-template-columns: 50px 100px repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: space-between;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody .tr p.itm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #333;
    text-align: center;
    line-height: 1.35em;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-visitor .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody .tr p.itm.choose_itm span {
    width: 100%;
    color: #fff;
    font-family: "Poppins-Regular";
    padding: 0.5em 0;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
    background-color: #333;
}

/* lookup master visitor */

/* lookup master sub-area */
.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-header {
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-header h1 {
    font-family: 'Poppins-Medium';
    font-size: 0.8rem;
    color: #333;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1em;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .box-search-table input.search-table {
    width: 100%;
    font-family: 'Poppins-Light';
    font-size: 1rem;
    color: #333;
    text-align: center;
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .box-search-table input.search-table:focus {
    outline: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .modals-tables {
    width: 100%;
    /* background-color: turquoise; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables {
    width: 100%;
    height: 100%;
    max-height: 320px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: auto;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .thead {
    width: 100%;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .thead .tr {
    width: 100%;
    display: grid;
    grid-template-columns: 50px 100px repeat(3, 1fr);
    grid-template-rows: 1fr;
    justify-content: space-between;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .thead .tr p.itm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    background-color: tomato;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody {
    width: 100%;
    /* background-color: violet; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody .tr {
    width: 100%;
    display: grid;
    grid-template-columns: 50px 100px repeat(3, 1fr);
    grid-template-rows: 1fr;
    justify-content: space-between;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody .tr p.itm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #333;
    text-align: center;
    line-height: 1.35em;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-subarea .modal-dialog .modal-content .modal-body .modals-tables .modals-box-tables .tbody .tr p.itm.choose_itm span {
    width: 100%;
    color: #fff;
    font-family: "Poppins-Regular";
    padding: 0.5em 0;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
    background-color: #333;
}

/* lookup master sub-area */

/* lookup master kamar */
.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-header {
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-header h1 {
    font-family: 'Poppins-Medium';
    font-size: 0.8rem;
    color: #333;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1em;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-search-table input.search-table {
    width: 100%;
    font-family: 'Poppins-Light';
    font-size: 1rem;
    color: #333;
    text-align: center;
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-search-table input.search-table:focus {
    outline: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .top h1 {
    font-family: 'Poppins-Regular';
    font-size: 0.95rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10%, 1fr));
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card {
    border-radius: 5px;
    border: 0.5px solid #C3FF93;
    box-sizing: border-box;
    overflow: hidden;
    cursor: default;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card:hover {
    border: 0.5px solid #939185;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card .card-detail-kamar {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 1em;
    padding: 1em;
    box-sizing: border-box;
    background-color: #C3FF93;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card .card-detail-kamar .top-card {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card .card-detail-kamar .top-card h1 {
    font-family: 'Poppins-Medium';
    font-size: 13px;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card .card-detail-kamar .bottom-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card .card-detail-kamar .bottom-card p {
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card .action-card {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 0.35em;
    box-sizing: border-box;
    cursor: pointer;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card:hover .action-card {
    background-color: #939185;
}


.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card:hover .action-card p {
    color: #fff;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-lookup-kamar .modal-dialog .modal-content .modal-body .box-master-kamar .bottom .box-card .action-card p {
    font-family: 'Poppins-Medium';
    font-size: 0.75rem;
    color: #333;
}

/* lookup master kamar */

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-header {
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-header h1 {
    font-family: 'Poppins-Medium';
    font-size: 0.8rem;
    color: #333;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-body {
    display: grid;
    grid-template-rows: 1fr auto;
    /* background-color: yellow; */
}

/* modal box-eticket */
.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-body .box-eticket {
    display: grid;
    grid-template-columns: 1fr 0.5px 1fr 0.5px 1fr;
    gap: 1.5em;
    padding-bottom: 1em;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
    box-sizing: border-box;
    background-color: yellowgreen;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-body .box-eticket .line {
    background-color: rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-body .box-eticket .left-box {
    display: flex;
    flex-direction: column;
    row-gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-body .box-eticket .middle-box {
    display: flex;
    flex-direction: column;
    row-gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-body .box-eticket .right-box {
    display: flex;
    flex-direction: column;
    row-gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-body .box-eticket .box-column-eticket .data {
    display: grid;
    grid-template-columns: 1fr 0.3fr 1fr;
    font-family: 'Poppins-Light';
    font-size: 0.8rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-body .box-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    padding-top: 1em;
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket .modal-dialog .modal-content .modal-body .box-footer .right button.update-e-ticket {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0.2em 2.5em;
    box-sizing: border-box;
    background-color: #4d96ff;
}

/* modal e-ticket */

/* modal e-ticket-cico */
.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-header {
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-header h1 {
    font-family: 'Poppins-Medium';
    font-size: 0.8rem;
    color: #333;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body {
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 1em;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    gap: 1em;
    padding-bottom: 1em;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
    box-sizing: border-box;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .top-box {
    display: grid;
    grid-template-rows: repeat(2, auto);
    gap: 1em;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .top-box .top-title {
    display: flex;
    justify-content: center;
    padding: 0.5em;
    padding-top: 0;
    box-sizing: border-box;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.5);
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .top-box .top-title h1 {
    font-family: 'Poppins-Medium';
    font-size: 1rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .top-box .bottom-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0.5px solid rgba(51, 51, 51, 0.5);
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    /* background-color: violet; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .top-box .bottom-title .english-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .top-box .bottom-title .english-title h1 {
    font-family: 'Poppins-Regular';
    font-size: 0.85rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .top-box .bottom-title .english-title .line {
    width: 100%;
    padding: 0.3px;
    box-sizing: border-box;
    background-color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .top-box .bottom-title .indo-title h2 {
    font-family: 'Poppins-Medium';
    font-style: italic;
    font-size: 0.85rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    gap: 1.5em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .data {
    display: grid;
    grid-template-columns: 0.5fr 0.1fr 1fr;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .data .title {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .data .title p:first-of-type {
    font-family: 'Poppins-Regular';
    font-size: 0.75rem;
    color: #333;
    line-height: 1.35em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .data .title p:last-of-type {
    font-family: 'Poppins-Medium';
    font-style: italic;
    font-size: 0.65rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .data .value {
    font-family: 'Poppins-Regular';
    font-size: 0.75rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .left-box {
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    /* background-color: red; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .left-box .data .camp-induction {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .left-box .data .camp-induction .form-check input.induction-input {
    border: 0.5px solid #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .left-box .data .camp-induction .desc-induction {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .left-box .data .camp-induction .desc-induction p {
    line-height: 1.5em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .left-box .data .rules p {
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #333;
    line-height: 1.5em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .bottom-box .left-box .data .signature {
    height: 5em;
    border-radius: 5px;
    border: 0.5px solid rgba(51, 51, 51, 0.5);
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .right-box {
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    /* background-color: violet; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .right-box .data-date {
    display: grid;
    grid-template-columns: 0.5fr 0.1fr 1fr;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .right-box .data-date .value.date input {
    width: 70%;
    font-family: 'Poppins-Regular';
    font-size: 0.75rem;
    color: #333;
    border-radius: 0;
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.5);
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-eticket .right-box .data-date .value.date input:focus {
    outline: none;
    box-shadow: none;
}

/* box-checkout */
.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out {
    display: flex;
    flex-direction: column;
    gap: 1em;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .top-check-out {
    display: grid;
    grid-template-rows: repeat(3, auto);
    justify-content: center;
    gap: 5px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(51, 51, 51, 0.5);
    border-radius: 5px;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .top-check-out p {
    font-family: 'Poppins-Medium';
    font-size: 0.8rem;
    color: #333;
    text-align: center;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .top-check-out .line {
    height: 1px;
    background-color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .top-input {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 1em;
    /* background-color: #4d96ff; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .top-input .item-input {
    display: grid;
    grid-template-columns: 1.05fr 0.1fr 1fr;
    font-family: 'Poppins-Regular';
    font-size: 0.7rem;
    color: #333;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .top-input .item-input.top-right {
    display: grid;
    grid-template-columns: 0.5fr 0.1fr 1fr;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .top-input .item-input .title {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .top-input .item-input .title p:last-of-type {
    font-family: 'Poppins-Medium';
    font-style: italic;
    font-size: 0.65rem;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .top-input .item-input .break {
    display: flex;
    align-items: center;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .top-input .item-input .value input {
    font-family: 'Poppins-Regular';
    font-size: 0.75rem;
    color: #333;
    border: 0.5px solid rgba(51, 51, 51, 0.5);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .top-input .item-input .value input:focus {
    outline: none;
    box-shadow: none;
    border: 0.5px solid rgba(51, 51, 51, 0.5);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input {
    display: grid;
    grid-template-columns: 0.31fr auto 1fr;
    /* gap: 0.5em; */
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5em;
    /* background-color: turquoise; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .title p:first-of-type {
    font-family: 'Poppins-Regular';
    font-size: 0.7rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .title p:last-of-type {
    font-family: 'Poppins-Medium';
    font-style: italic;
    font-size: 0.65rem;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .break {
    display: flex;
    align-items: center;
    /* background-color: blueviolet; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .value {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-left: 15px;
    box-sizing: border-box;
    /* background-color: violet; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .value .check-item {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .value .check-item .form-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
    /* flex-direction: column; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .value .check-item input.form-check-input {
    border: 1px solid rgba(51, 51, 51, 0.5);
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .value .check-item .form-check .box-label {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .value .check-item label.form-check-label {
    font-family: 'Poppins-Regular';
    font-size: 0.65rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .middle-input .value .check-item label.form-check-label:last-of-type {
    font-family: 'Poppins-Medium';
    font-size: 0.65rem;
    font-style: italic;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .bottom-input {
    display: grid;
    grid-template-columns: 0.31fr auto 1fr;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .bottom-input .title {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .bottom-input .title p:first-of-type {
    font-family: 'Poppins-Regular';
    font-size: 0.7rem;
    color: #333;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .bottom-input .title p:last-of-type {
    font-family: 'Poppins-Medium';
    font-style: italic;
    font-size: 0.65rem;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .bottom-input .break {
    display: flex;
    align-items: center;
    padding-right: 1em;
    box-sizing: border-box;
    /* background-color: violet; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .bottom-input .value .form-floating textarea {
    border: 0.5px solid rgba(51, 51, 51, 0.5);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-check-out .bottom-check-out .bottom-input .value .form-floating textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0.5px solid rgba(51, 51, 51, 0.5);
}

/* box-checkout */

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    padding-top: 1em;
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-e-ticket-cico .modal-dialog .modal-content .modal-body .box-footer .right button.update-e-ticket {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0.2em 2.5em;
    box-sizing: border-box;
    background-color: #4d96ff;
}

/* modal e-ticket-cico */

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body-detail {
    width: 100%;
    overflow: auto;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content {
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body-detail .table-detail-booking .box-detail-booking {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body-detail .table-detail-booking .box-detail-booking .thead {
    width: 100%;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body-detail .table-detail-booking .box-detail-booking .thead .tr {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(16, 250px);
    grid-template-rows: 1fr;
    justify-content: space-between;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body-detail .table-detail-booking .box-detail-booking .thead .tr p.itm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    background-color: tomato;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body-detail .table-detail-booking .box-detail-booking .tbody {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body-detail .table-detail-booking .box-detail-booking .tbody .tr {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(16, 250px);
    grid-template-rows: 1fr;
    justify-content: space-between;
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body-detail .table-detail-booking .box-detail-booking .tbody .tr p.itm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #333;
    text-align: center;
    line-height: 1.35em;
    padding: 10px;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
    box-sizing: border-box;
    /* background-color: yellow; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body-detail .table-detail-booking .box-detail-booking .tbody .tr p.itm input.item {
    width: 100%;
    font-family: 'Poppins-Regular';
    font-size: 0.75rem;
    color: #333;
    text-align: center;
    border: none;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
    /* background-color: yellowgreen; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .top-extend .right .modal-create-cico .modal-dialog .modal-content .modal-body-detail .table-detail-booking .box-detail-booking .tbody .tr p.itm input.item:focus {
    outline: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    /* background-color: brown; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 0.5em;
    /* background-color: green; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend {
    width: 100%;
    overflow: auto;
    /* background-color: #4d96ff; */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend .box-table {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend .box-table .thead {
    width: 100%;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend .box-table .thead .tr {
    width: 100%;
    display: grid;
    /* grid-template-columns: 50px 100px repeat(17, 250px); */
    grid-template-columns: 50px 100px 150px 150px 250px 100px 150px 80px 100px 250px 100px 100px 100px 125px 125px 150px 50px;
    grid-template-rows: 1fr;
    justify-content: space-between;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend .box-table .thead .tr p.item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
    /* border-radius: 10px; */
    padding: 10px;
    box-sizing: border-box;
    border: 0.5px solid #fff;
    background-color: tomato;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend .box-table .tbody {
    width: 100%;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend .box-table .tbody .tr {
    width: 100%;
    display: grid;
    /* grid-template-columns: 50px 100px repeat(17, 250px); */
    grid-template-columns: 50px 100px 150px 150px 250px 100px 150px 80px 100px 250px 100px 100px 100px 125px 125px 150px 50px;
    grid-template-rows: 1fr;
    justify-content: space-between;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend .box-table .tbody .tr p.item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #333;
    text-align: center;
    line-height: 1.35em;
    padding: 10px;
    box-sizing: border-box;
    border: 0.5px solid #dedede;
    /* border-bottom: 0.5px solid rgba(51, 51, 51, 0.3); */
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend .box-table .tbody .tr p.item.action {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: 1fr;
    align-items: center;
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend .box-table .tbody .tr p.item.action a {
    text-decoration: none;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .table-transaction-extend .box-table .tbody .tr form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .pagination-transaction-cico {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 0.5em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .box-table-pagination .pagination-transaction-cico nav ul.pagination li a.page-link {
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color: #333;
    border: 0.5px solid rgba(51, 51, 51, 0.3);
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .menu-status {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.container-app .box-app main.main-transaction-extend .box-main .middle-transaction-extend .bottom-extend .menu-status a {
    font-family: "Poppins-Regular";
    font-size: 0.8rem;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    padding: 0.45em 1.5em;
    box-sizing: border-box;
    background-color: #4d96ff;
}


.container-app .box-app main.main-transaction-extend .box-main .bottom-dashboard {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1em 0;
    box-sizing: border-box;
}

.container-app .box-app main.main-transaction-extend .box-main .bottom-dashboard p {
    font-family: "Poppins-Regular";
    font-size: 0.8rem;
    color: #333;
}

/* MAIN */