/**
 * @Author: Nissanka Perera
 * @Date:   2022-06-18 10:12:44
 * @Last Modified by:   Nissanka Perera
 * @Last Modified time: 2023-12-17 17:42:43
 */
/* --
 * Description   : Application DataTable CSS.

	CSS INDEX 
	---------
	01. Datatable Settings
	02. Data Listin  Button Settings
	03. Action Button on Transaction Form
	04. Form Action Button on Transaction Form
	05. From TAB Settings

*/

/* -------------------------------------------------
*	01. Datatable Settings
*  ---------------------------------------------- */

.dataTable,
.table
{
	width: 100% !important;
}

table.table > tbody {
	font-size: .80rem;
}

table.table > thead {
	font-size: .85rem;
}

table.table > tfoot {
	font-size: .85rem;
}

table.table>thead>tr>th
{
	border-bottom: none !important;
	border-top: none !important;
}

table.table thead th,
table.table thead td {
	padding: 0.2rem 0.4rem;
	font-size: .8rem;
	font-weight: 550;
	color: #000;
}

table.table tfoot th,
table.table tfoot td {
	padding: .25rem;
}
table.table tbody th,
table.table tbody td {
	padding: .25rem;
	vertical-align: middle;
	white-space: nowrap;
	}

table.table tbody tr
{
	line-height: 1.25rem;
}

table.table tbody tr td
{
	line-height: .85rem;
	font-size: .75rem;
}

table.fixedHeader-locked {
	position: absolute !important;
	background-color: white;
}

.dataTables_wrapper div.dataTables_length label,
.dataTables_wrapper div.dataTables_filter label,
.dataTables_wrapper div.dataTables_filter select
{
	font-size: 0.85rem;
}

.dataTables_wrapper .dataTables_filter input
{
    margin-left: 0;
	padding-left: .25rem;
	font-size: 0.75rem;
}

.dataTables_wrapper div.dataTables_length select
{
	width:fit-content;
}

.page-link
{
	padding: .25rem .5rem;
	font-size: 0.75rem;
}

.dataTables_info
{
	font-size: .75rem;
}

#appdt_list_paginate

table.dataTable>thead .sorting:before,
table.dataTable>thead .sorting:after,

table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_desc:before,
table.dataTable>thead .sorting_desc:after,

table.dataTable>thead .sorting_asc_disabled:before,
table.dataTable>thead .sorting_asc_disabled:after,
table.dataTable>thead .sorting_desc_disabled:before,
table.dataTable>thead .sorting_desc_disabled:after
{
	bottom: .25rem;
}

/* Table Row */
td.highlight {
    background-color: orange !important;
}

.hover > tbody> tr:hover > *
{
  background-color: #bbdefb !important;
}

/* -------------------------------------------------
*	02. Data Listin  Button Settings
* 	Refer app.css section #6 for sap-ion refernce
*  ---------------------------------------------- */

/* DataListing Action Buttons */
.data-list-buttons
{
	text-align: left;
	padding: auto 0.25rem;
}

.data-list-buttons .app-list-crud-btn
{
	width: fit-content;
	padding: .125rem .25rem ;
	margin: auto;
	font-size: .75rem;
	font-weight: 500;
	border: #d50000 solid .01rem;
	border-radius: .25rem;
	display: inline-block;
	line-height: normal;
	vertical-align: middle;
	background-color: transparent;

}

.data-list-buttons .app-list-crud-btn:disabled
{
	opacity: 0.5;
	cursor: not-allowed;
}

.data-list-buttons .app-list-crud-btn em
{
	font-size: 0.875rem;
	font-weight: 400;
}

/* Datatable ROW CRUD	- */
.data-list-buttons .btn-raw-add,
.data-list-buttons .btn-raw-upd,
.data-list-buttons .btn-raw-del,
.data-list-buttons .btn-raw-vew,
.data-list-buttons .btn-raw-prt
{
	color: #000;
}

.data-list-buttons .btn-raw-add:hover,
.data-list-buttons .btn-raw-upd:hover,
.data-list-buttons .btn-raw-del:hover,
.data-list-buttons .btn-raw-vew:hover,
.data-list-buttons .btn-raw-prt:hover
{
	color: black;
	background-color: #bbdefb !important;
}

/* iCON Button Styling */ 
.btn-dt-crud-ibtn
{
	width: fit-content;
	padding: .125rem .25rem ;
	margin: auto .05rem;
	font-size: .75rem;
	font-weight: 500;
	border: #d50000 solid .01rem;
	border-radius: .25rem;
	background-color: transparent;
	display: inline-block;
	line-height: normal;
	vertical-align: middle;
}

/* -------------------------------------------------
*	03. Action Button on Transaction Form
*  ---------------------------------------------- */
/* Form Header CRUD + OTHER action button		  */
.hdAction-add,
.hdAction-vew,
.hdAction-print,
.hdAction-email,
.hdAction-record-nav-first,
.hdAction-record-nav-prev,
.hdAction-record-nav-next,
.hdAction-record-nav-last,
.hdAction-closeform,
.hdAction-refresh,
.hdAction-export-data
{
	background: none;
}

.hdAction-closeform {
	color: black;
}

.hdAction-add:hover,
.hdAction-vew:hover,
.hdAction-printL:hover,
.hdAction-email:hover,
.hdAction-record-nav-first:hover,
.hdAction-record-nav-prev:hover,
.hdAction-record-nav-next:hover,
.hdAction-record-nav-last:hover,
.hdAction-closeform:hover,
.hdAction-refresh:hover,
.hdAction-export-data:hover
{
	background-color: whitesmoke !important;
	color: black;
}

/* -------------------------------------------------
*	04. Form Action Button on Transaction Form
*		Refer app.css SAP Icon sectio for icon-name
*		https://material.io/design/color/the-color-system.html#tools-for-picking-colors
*  ---------------------------------------------- */

.form-action-buttons
{
	text-align: left;
}

.form-action-buttons em
{
	font-size: 0.875em;
}


/* iCON Button Styling */ 
.form-action-buttons .app-form-crud-ibtn
{
	width: fit-content;
	padding: .125rem .25rem ;
	margin: auto .05rem;
	font-size: .75rem;
	font-weight: 500;
	border: #d50000 solid .01rem;
	border-radius: .25rem;
	background-color: transparent;
	display: inline-block;
	line-height: normal;
	vertical-align: middle;
}

.form-action-buttons .app-form-crud-ibtn:disabled
{
	opacity: 0.5;
	cursor: not-allowed;
}

.form-action-buttons .app-form-crud-ibtn em
{
	font-size: .875rem;
	font-weight: 400;
}

.form-action-buttons .btn-icn-close
{
	background-color: #fafafa;
	color: #fff;
}

.form-action-buttons .ibtn-icn-close:hover
{
	background-color: #e0e0e0;
	color: #fff;
}


/* Text Button Styling */
.form-action-buttons .app-form-crud-txtbtn
{
	width: fit-content;
	padding: .25rem .5rem ;
	font-size: .65rem;
	font-weight: 500;
	border: #eeee solid .1rem;
	border-radius: .35rem;
	background-color: #fafafa;
	display: inline-block;
	line-height: normal;
	vertical-align: middle;
}

.form-action-buttons .btn-txt-add
{
	background-color: #80d8ff;
	color: #000;
}

.form-action-buttons .btn-txt-add:hover
{
	background-color: #00b0ff;
	color: #fff;
}

.form-action-buttons .btn-txt-upd
{
	background-color: #ffd180;
	color: #000;
}

.form-action-buttons .btn-txt-upd:hover
{
	background-color: #ff6d00;
	color: #fff;
}

.form-action-buttons .btn-txt-del
{
	background-color: #ff8a80;
	color: #000;
}

.form-action-buttons .btn-txt-del:hover
{
	background-color: #d50000;
	color: #fff;
}

/* -------------------------------------------------
*	05. Form Action TAB Settings
*  ---------------------------------------------- */

.tabset
{
	text-align: left;
	background-color: #eeeeee;
	height: calc(1.5rem);
}

.tabset > input[type="radio"] {
	position: absolute;
	display: none;
  }

.tabset em
{
	font-size: 0.875em;
}

/* TAB Styling */ 
.tabset .app-tab
{
	/* width: 5.25rem; */
	padding: .25rem .25rem ;
	margin: auto 0rem auto 0rem;
	font-size: 1rem;
	font-weight: 500;
	height: 1.5rem;
	cursor: pointer;
	display: inline-block;
	line-height: normal;
	vertical-align: middle;
}

.tabset > input:checked + label {
	border-color: #ccc;
	border-bottom: 0.025rem solid #fff;
	margin-bottom: -0.025rem;
  }

.tabset .app-tab
{
	border-top-left-radius: .3rem;
	border-top-right-radius: .3rem;
	background-color: #f5f5f5;
	border-left: solid 0.025rem #f5f5f5;
	border-right: solid 0.025rem #f5f5f5;
	border-top: solid 0.025rem #f5f5f5;
	border-bottom: solid 0.025rem #000;
}

.tabset .app-tab:hover,
.tabset > input:checked + label
{
	background-color: #e0e0e0 !important;
	border-left: solid 0.025rem #bdbdbd;
	border-right: solid 0.025rem #bdbdbd;
	border-top: solid 0.025rem #bdbdbd;
}

.tab-panels .tab-panel
{
	display: none;
}

.tab-panels
{
	width: 100%;
}
/*  EoF Settings--------------------------------- */