/* =================================================
	   WORK CONSOLE SHELL
	================================================= */

	#cls_workConsoleTool{
		position:fixed!important;
		top:155px!important;
		bottom:0!important;
		left:0!important;
		right:0!important;

		display:flex!important;
		flex-direction:column!important;
		overflow:hidden!important;

		background:#fafcff!important;
		z-index:20!important;
	}


	/* =================================================
	   50 / 50 CARDS AND DETAIL SPLIT
	================================================= */

	.cls_recordsSplit,
	#recordsSplit{
		display:flex!important;
		flex-direction:row!important;
		align-items:stretch!important;

		flex:1 1 auto!important;
		width:100%!important;
		min-width:0!important;
		min-height:0!important;

		overflow:hidden!important;
	}

	/* Left side: cards */

	.cls_recordsLeftPanel,
	#recordsLeftPanel,
	.ccbSplitLeft{
		flex:1 1 50%!important;
		width:50%!important;
		min-width:0!important;
		min-height:0!important;
		max-width:none!important;

		display:flex!important;
		flex-direction:column!important;
		overflow:hidden!important;
	}

	.cls_recordsDisplay,
	#recordsDisplay{
		flex:1 1 auto!important;
		min-width:0!important;
		min-height:0!important;
		overflow:auto!important;
	}

	/* Right side: selected record detail */

	.cls_recordsDetailPanel,
	#recordsDetailPanel,
	.ccbSplitRight{
		flex:1 1 50%!important;
		width:50%!important;
		min-width:0!important;
		min-height:0!important;
		max-width:none!important;
		height:auto!important;

		overflow:auto!important;
		border-left:1px solid var(--ccb-border);
	}

	.cls_recordsDetailContent,
	#recordsDetailContent{
		min-width:0!important;
		min-height:100%!important;
		padding:10px;
		overflow:auto!important;
	}

	/* Retired splitter */

	.ccbSplitHandle,
	#recordsResizeHandle{
		display:none!important;
	}


	/* =================================================
	   BULK CHANGE BAR
	================================================= */

	.cls_recordsBulkChangeBar,
	#recordsBulkChangeBar{
		flex:0 0 auto;
		width:100%;
		padding:4px 6px;

		border-top:1px solid var(--ccb-border);
		background:#ffffff!important;

		overflow-x:auto;
		overflow-y:hidden;
		z-index:10;
	}


	/* =================================================
	   DATATABLE CARD CONTAINER
	================================================= */

	table.ccbRecordsCardsTable{
		width:100%!important;
		border-collapse:separate!important;
		border-spacing:0 10px!important;
	}

	table.ccbRecordsCardsTable tbody tr,
	table.ccbRecordsCardsTable tbody td{
		background:transparent!important;
		border-top:0!important;
	}

	table.ccbRecordsCardsTable td.ccbCardCell{
		width:100%;
		padding:0!important;
		vertical-align:top;
	}


	/* =================================================
	   RECORD CARD
	================================================= */

	.ccbRecordCard{
		width:100%;
		box-sizing:border-box;

		background:#ffffff;
		border:1px solid #d7e3ef;
		border-left:5px solid #d7e3ef;
		border-radius:9px;

		box-shadow:0 1px 3px rgba(15,23,42,.08);
		overflow:hidden;

		transition:
			box-shadow .15s ease,
			border-color .15s ease,
			transform .15s ease;
	}

	.ccbRecordCard:hover{
		border-color:#9fc3e5;
		box-shadow:0 4px 12px rgba(15,23,42,.12);
		transform:translateY(-1px);
	}

	.ccbRecordCard.is-parent{
		border-left-color:#2f4f6f;
	}

	.ccbRecordCard.is-child{
		width:calc(100% - 28px);
		margin-left:28px;
	}


	/* =================================================
	   CARD ROWS
	================================================= */

	.ccbCardClientRow,
	.ccbCardRecordRow,
	.ccbCardControlRow,
	.ccbCardSummaryRow{
		display:flex;
		align-items:center;
		gap:10px;

		width:100%;
		min-width:0;
		padding:9px 12px;
		box-sizing:border-box;
	}

	.ccbCardClientRow,
	.ccbCardRecordRow,
	.ccbCardControlRow{
		border-bottom:1px solid #edf2f7;
	}

	.ccbCardClientRow{
		font-weight:600;
	}

	.ccbCardRecordRow{
		align-items:flex-start;
	}

	.ccbCardSummaryRow{
		align-items:flex-start;
		min-height:34px;
	}


	/* =================================================
	   CLIENT ROW
	================================================= */

	.ccbCardSelect{
		flex:0 0 auto;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		min-width:28px;
	}

	.ccbCardClientID{
		flex:0 0 auto;
		font-size:12px;
		color:#64748b;
	}

	.ccbCardFullName{
		flex:1 1 auto;
		min-width:0;

		color:#2563eb;
		font-weight:600;

		white-space:normal;
		overflow-wrap:anywhere;
	}

	.ccbCardClientTime{
		flex:0 0 auto;
		color:#64748b;
		font-size:12px;
		white-space:nowrap;
	}

	.ccbCardClientAction{
		flex:0 0 auto;
		margin-left:auto;
	}


	/* =================================================
	   RECORD ROW
	================================================= */

	.ccbCardRecordInfo{
		flex:1 1 auto;
		min-width:0;
	}

	.ccbCardRecordTitle{
		font-size:15px;
		font-weight:700;
		color:#1f2933;
		line-height:1.35;

		white-space:normal;
		overflow-wrap:anywhere;
	}

	.ccbCardRecordMeta{
		display:flex;
		align-items:center;
		flex-wrap:wrap;
		gap:6px 12px;

		margin-top:4px;
		color:#52606d;
		font-size:12px;
	}

	.ccbCardRecordActions{
		flex:0 0 auto;
		display:flex;
		align-items:center;
		gap:8px;
	}


	/* =================================================
	   STATUS / DUE / ASSIGNED ROW
	================================================= */

	.ccbCardControlRow{
		align-items:center!important;
		flex-wrap:wrap!important;
		gap:16px!important;

		height:auto!important;
		min-height:0!important;

		padding-top:6px!important;
		padding-bottom:6px!important;
	}

	.ccbCardControl{
		display:flex!important;
		align-items:center!important;
		flex:0 0 auto!important;
		gap:6px!important;

		min-width:0!important;
		height:auto!important;
		min-height:0!important;

		margin:0!important;
		padding:0!important;
	}

	.ccbCardControlLabel{
		color:#64748b;
		font-size:11px;
		font-weight:600;
		text-transform:uppercase;
		letter-spacing:.03em;
	}

	/* Neutralize tall wrappers produced by mkDataControl */

	.ccbCardControl .w3-row,
	.ccbCardControl .w3-container,
	.ccbCardControl .w3-display-container{
		height:auto!important;
		min-height:0!important;

		margin:0!important;
		padding-top:0!important;
		padding-bottom:0!important;
	}

	.ccbCardControl form{
		display:inline-block!important;
		height:auto!important;
		min-height:0!important;

		margin:0!important;
		padding:0!important;
	}

	.ccbCardControl select,
	.ccbCardControl input{
		height:28px!important;
		min-height:28px!important;

		margin:0!important;
		vertical-align:middle!important;
	}

	.ccbCardControl .w3-border-bottom{
		border-bottom:0!important;
		background:transparent!important;
	}


	/* =================================================
	   SUMMARY / TITLE ELEMENTS
	================================================= */

	.ccbCardSummaryRow .ccbDisplayWrap{
		flex:1 1 auto;
		display:block;

		min-width:0;
		max-height:none;

		color:#52606d;
		font-size:12px;
		line-height:1.45em;

		overflow:visible;
		white-space:normal;
		overflow-wrap:anywhere;
	}


	/* =================================================
	   CARD ACTION BUTTONS
	================================================= */

	.ccbRowBtn{
		display:inline-flex;
		align-items:center;
		justify-content:center;

		min-height:34px;
		padding:4px 10px;

		border:1px solid #d1d5db;
		border-radius:6px;

		background:#ffffff;
		color:#374151;

		cursor:pointer;
		font-size:13px;
		line-height:1;
		text-decoration:none;
		white-space:nowrap;
	}

	.ccbRowBtn:hover{
		background:#f3f4f6;
	}

	.ccbRowBtn:focus{
		outline:none;
		box-shadow:0 0 0 2px rgba(37,99,235,.20);
	}

	.ccbRowBtn--icon{
		width:34px;
		height:34px;
		padding:0;
	}

	.ccbRowBtn i{
		pointer-events:none;
	}


	/* =================================================
	   SHARED DETAIL / COMMENTS OUTPUT
	================================================= */

	.ccbSharedDetailPanel{
		display:none;

		margin-top:8px;
		padding:10px;

		border:1px solid #ddd;
		background:#ffffff;
	} 
    /* Status / Due / Assigned */
    .ccbCardControlRow{
        align-content:center!important;
    }

    .ccbCardControl{
        align-self:center!important;
        flex-grow:0!important;
        flex-shrink:0!important;
        height:32px!important;
        min-height:32px!important;
        max-height:32px!important;
    }

    .ccbCardControl > .w3-row,
    .ccbCardControl > div{
        display:inline-flex!important;
        align-items:center!important;
        align-self:center!important;

        flex:0 0 auto!important;
        width:auto!important;

        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;

        margin:0!important;
        padding:0!important;
        border:0!important;
        background:transparent!important;
    }

    .ccbCardControl > div > div,
    .ccbCardControl > div > div > .w3-container,
    .ccbCardControl .w3-display-container{
        display:inline-flex!important;
        align-items:center!important;

        width:auto!important;
        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;

        margin:0!important;
        padding:0!important;
    }

    .ccbCardControl form{
        display:inline-flex!important;
        align-items:center!important;

        width:auto!important;
        height:28px!important;

        margin:0!important;
        padding:0!important;
    }

    .ccbCardControl input,
    .ccbCardControl select{
        height:28px!important;
        margin:0!important;
    }