#profitloss-total-popup { display: flex; position: relative; flex-direction: column; overflow-y:scroll; height: 100%; } #profitloss-total-popup .container { display: flex; flex-direction: column; margin: 0 20px; padding: 16px; } #profitloss-total-popup .title-wrapper { display: flex; margin-bottom: 32px; } #profitloss-total-popup .vertical-divider { background-color: #333; min-width: 5px; border-radius: 3px; margin: 3px 0; } #profitloss-total-popup .title { display:inline-block; font-size: 1.2rem; padding-left: 10px; } #profitloss-total-popup .category-card-container { margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; flex-direction: column; } #profitloss-total-popup .category-card-container .row { display: flex; padding: 0 16px 16px 16px; margin: 0 16px 16px 0; border-bottom: 1px solid #ccc; } #profitloss-total-popup .category-card-container .row:nth-child(even) { margin-right: 0; } #profitloss-total-popup .category-card-container .label { flex:1; border-right: 1px solid #ccc; margin-right: 30px; color:#777; } #profitloss-total-popup .category-card-container .value { flex:3; /* font-weight: bold; */ } #profitloss-total-popup .btn_wrappper { flex:1; width:100%; position: fixed; bottom:0; display: flex; justify-content: center; align-items: center; height:80px; border-top: 1px solid #ccc; background-color: white; } #profitloss-total-popup .profitloss-total-table { height:100%; margin-bottom: 180px; background-color: pink; } #profitloss-total-popup .profitloss-total-table thead { background-color: #777; color: white; } #profitloss-total-popup .profitloss-total-table thead td { padding: 8px; } #profitloss-total-popup .profitloss-total-table table > tbody > tr > td { border: none; } #profitloss-total-popup .profitloss-total-table table.plm_table > tbody > tr > td { border-left: 1px solid #ccc; } #profitloss-total-popup .profitloss-total-table table > tbody > tr > td:last-child { border-right: 1px solid #ccc; } #profitloss-total-popup .profitloss-total-table table.plm_table > tbody > tr > td:nth-child(3) { text-align: right; padding-right: 16px; } #profitloss-total-popup .profitloss-total-table table.plm_table > tbody > tr { border-bottom:1px solid #ccc; } #profitloss-total-popup .profitloss-total-table thead { border-top: 1px solid #ccc; } #profitloss-total-popup .profitloss-total-table .auto-calculated { text-align: center; background-color: #e0e9f1; } #profitloss-total-popup .profitloss-total-table .input { text-align: center; background-color: #f7eeca; } #profitloss-total-popup .scroll-view { height:150px; overflow: hidden; overflow-y: scroll; } #profitloss-total-popup .inner-table { border-spacing: 0; width:100%; border-collapse: collapse; text-align: center; font-size: 13px; } #profitloss-total-popup .plm_table td + .innder-table { border: none; } #profitloss-total-popup .inner-table thead { background-color: #acacac; } #profitloss-total-popup .inner-table-row { border-bottom: 1px solid #ddd !important; } #profitloss-total-popup .inner-table-row > td { border-right: 1px solid #ddd !important; } #profitloss-total-popup .inner-table-row > td:nth-child(8) { border-right: none !important; } #profitloss-total-popup .inner-table-row td > input { text-align: center; } #profitloss-total-popup .total-row { border-top: 1px solid #ccc; } #profitloss-total-popup tfoot .total-row td:nth-child(1) { text-align: right; padding-right: 16px; background-color: #f6f6f6; border:none; } #profitloss-total-popup tfoot .total-row td:nth-child(2) { text-align: center; padding-right: 0; border:none; border-left: 1px solid #ccc; } #profitloss-total-popup tfoot .plm_btns { width:100%; padding:0; height:100% !important; border:none; border-radius: 0; } #profitloss-total-popup .inner-table-row .blue_btn { width:100%; padding:0; height:100% !important; border:none; }