:root {
	--pay-btn-primary-font-color: #F4FFFB;
    --pay-btn-primary-bg-color: #34586B;
    --pay-btn-primary-border-color: #34586B;
    --pay-btn-primary-hover-bg-color: #688290;
    --pay-btn-primary-hover-border-color: #688290;
    --pay-btn-primary-active-bg-color: #688290;
    --pay-btn-primary-active-border-color: #688290;
    --pay-btn-primary-focus-bg-color: #688290;
    --pay-btn-primary-focus-border-color: #688290;
    
    --pay-btn-secondary-font-color: #34586B;
    --pay-btn-secondary-bg-color: #FFFFFF;
    --pay-btn-secondary-border-color: #34586B;
    --pay-btn-secondary-hover-border-color: #688290;
    --pay-btn-secondary-active-border-color: #688290;
    --pay-btn-secondary-focus-border-color: #688290;
    
    --pay-card-btn-font-color: #F4FFFB;
    --pay-card-btn-bg-color: #34586B;
    --pay-card-btn-border: unset;
    
    --pay-card-btn-hover-font-color: #F4FFFB;
    --pay-card-btn-hover-bg-color: #688290;
    --pay-card-btn-hover-border-color: unset;
    --pay-card-btn-hover-box-shadow: unset;
    
    --pay-input-field-focus-border-color: #688290;
	--pay-input-field-hover-border-color: #688290;
    
    --pay-radio-checkbox-border-color: #34586B;
    --pay-radio-checkbox-checked-color: #34586B;
    --pay-radio-checkbox-hover-border-color: #688290;
    --pay-radio-checked-focus-border-color: #34586B;
    
    --pay-table-heading-font-color: #34586B;
    
    --pay-remove-item-link-font-color: #34586B;
    --pay-remove-item-link-hover-font-color: #688290;
    
    --pay-search-field-custom-text-colour: #FF0000;
}

.btn-action {
	background-color: var(--pay-btn-primary-bg-color);
    border: 1px solid var(--pay-btn-primary-bg-color);
    border-radius: 8px;
}

#termsAndConditions {
    margin-left: 10px;
}

#lct-search-field-or-text-rotp {
	color: var(--pay-search-field-custom-text-colour);
	font-weight: bold;
	flex-basis: 1%;
	text-align: center;
	margin: auto;
}

.btn-action.btnPrint {
	color: var(--pay-btn-secondary-font-color);
    background-color: var(--pay-btn-secondary-bg-color);
    border: var(--pay-btn-secondary-border);
}

.table-container tr td .btn-action {
    background-color: var(--pay-btn-primary-bg-color);
    color: var(--pay-btn-primary-font-color);
    border: 1px solid var(--pay-btn-primary-border-color);
}

html.mobileDisabled .table-container tr td .btn-action:hover {
    color: var(--pay-btn-primary-font-color);
    border: 1px solid var(--pay-btn-primary-hover-border-color);
    background-color: var(--pay-btn-primary-hover-bg-color);
    box-shadow: none;
}


.btn-action.btn-type-prev {
	border: 1px solid var(--pay-btn-secondary-border-color);
}

.btn-action.btn-back {
	border: 1px solid var(--pay-btn-secondary-border-color);
	color: var(--pay-btn-secondary-font-color);
	background-color: var(--pay-btn-secondary-bg-color);
}

html.mobileDisabled .btn-action:hover {
    border: 1px solid var(--pay-btn-primary-hover-bg-color);
    background-color: var(--pay-btn-primary-hover-bg-color);
    -webkit-box-shadow: none;
    box-shadow: none;
}

html.mobileDisabled input.btn-action:hover {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

html.mobileDisabled .btn-action:active {
    border: 1px solid var(--pay-btn-primary-active-bg-color);
    background-color: var(--pay-btn-primary-active-bg-color);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

html.mobileDisabled .btn-action:focus {
    border: 1px solid var(--pay-btn-primary-focus-bg-color);
    background-color: var(--pay-btn-primary-focus-bg-color);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

html.mobileDisabled .btn-action.btn-cancel:hover, html.mobileDisabled .btn-action.btn-type-prev:hover,
html.mobileDisabled .btn-action.make-another-payment:hover,
html.mobileDisabled .btn-action.btn-print:hover,
html.mobileDisabled .btn-action.btn-back:hover {
    color: var(--pay-btn-secondary-font-color);
    border: 1px solid var(--pay-btn-secondary-hover-border-color);
    background-color: var(--pay-btn-secondary-bg-color);
    box-shadow: none;
}

html.mobileDisabled .btn-action.btn-cancel:active, html.mobileDisabled .btn-action.btn-type-prev:active,
html.mobileDisabled .btn-action.make-another-payment:active,
html.mobileDisabled .btn-action.btn-print:active,
html.mobileDisabled .btn-action.btn-back:active  {
    color: var(--pay-btn-secondary-font-color);
    border: 1px solid var(--pay-btn-secondary-active-border-color);
    background-color: var(--pay-btn-secondary-bg-color);
    box-shadow: none;
}

html.mobileDisabled .btn-action.btn-print:active {
	text-decoration: var(--pay-btn-tertiary-hover-text-decoration);
}

html.mobileDisabled .btn-action.btn-cancel:focus, html.mobileDisabled .btn-action.btn-type-prev:focus,
html.mobileDisabled .btn-action.make-another-payment:focus,
html.mobileDisabled .btn-action.btn-print:focus,
html.mobileDisabled .btn-action.btn-back:focus  {
    color: var(--pay-btn-secondary-font-color);
    border: 1px solid var(--pay-btn-secondary-focus-border-color);
    background-color: var(--pay-btn-secondary-bg-color);
    box-shadow: none;
    outline-color: var(--pay-btn-secondary-focus-border-color);
    outline-offset: -1px;
    outline-style: auto;
    outline-width: 1px;
}

html.mobileDisabled .btn-action.btn-print:focus {
	text-decoration: var(--pay-btn-tertiary-hover-text-decoration);
}

.boxshadow input[type="text"]:hover, .boxshadow input[type="password"]:hover, .boxshadow input[type="text"]:hover, .boxshadow input[type="tel"]:hover, .boxshadow input[type="number"]:hover, .boxshadow textarea:hover {
	box-shadow: none;
    outline: none;
}

.boxshadow input[type="text"]:focus, .boxshadow input[type="password"]:focus, .boxshadow input[type="text"]:focus, .boxshadow input[type="tel"]:focus, .boxshadow input[type="number"]:focus, .boxshadow textarea:focus {
	box-shadow: none;
    outline: none;
    border-color: var(--pay-input-field-focus-border-color);
}

.boxshadow select:hover {
	box-shadow: none;
	outline: 2px solid var(--pay-radio-checkbox-hover-border-color)!important;
	border: 1px solid var(--pay-radio-checkbox-hover-border-color)!important;
}

.boxshadow select:focus {
	box-shadow: none;
	outline: 2px solid var(--pay-radio-checkbox-hover-border-color)!important;
	border: 1px solid var(--pay-radio-checkbox-hover-border-color)!important;
}

.standard-radio + span:before {
    border-radius: 50%;
}

.standard-radio + span:before,
input[type=checkbox].standard-radio + span:before,
input[type=checkbox].standard-radio + span.select-default-pm:before {
    border: 2px solid var(--pay-radio-checkbox-border-color);
}

.standard-radio:checked + span:before,
input[type=checkbox].standard-radio:checked + span:before {
    border: 2px solid var(--pay-radio-checkbox-checked-color);
}

input[type=radio].standard-radio:hover + span:before,
input[type=checkbox].standard-radio:hover + span:before,
input[type=radio].standard-radio:active + span:before,
input[type=checkbox].standard-radio:active + span:before,
input[type=radio].standard-radio:focus + span:before,
input[type=checkbox].standard-radio:focus + span:before {
    border: 2px solid var(--pay-radio-checkbox-hover-border-color)!important;
}

input[type=radio].standard-radio:hover:checked + span:before,
input[type=radio].standard-radio:active:checked + span:before,
input[type=radio].standard-radio:focus:checked + span:before {
    border-color: var(--pay-radio-checked-focus-border-color)!important;
    background-color: var(--pay-radio-checked-focus-border-color);
}

input[type=radio].standard-radio:focus + span:before,
input[type=checkbox].standard-radio:focus + span:before {
	outline: 2px solid var(--pay-radio-checkbox-hover-border-color);
	outline-offset: -3px;
    box-shadow: unset;
}

input[type=radio].standard-radio:focus:checked + span:before {
    outline: none;
    box-shadow: inset 0 0 0 3px white;
}

.cp-item-row .cp-item-row-content-col .inactive {
    opacity: 0.7;
    background-color: unset;
}

.cp-popup .tab-content label[for="add-expiryDateYearDC"],
.cp-popup .tab-content label[for="add-expiryDateYearCC"],
.cp-popup .tab-content label[for="edit-expiryDateYearDC"],
.cp-popup .tab-content label[for="edit-expiryDateYearCC"] {
    margin-left: 2%;
}

body.multipay .table-container td.paymentDateCol .standard-radio + span:before {
    height: 16px;
    width: 16px;
}

body.multipay .table-container td.paymentDateCol .radioContainer .standard-label-msg {
    padding-left: 20px;
}

.item-header h1 .icon-header img {
    display: none;
}

table.dataTable thead tr th {
    border-left: 1px solid #f8f8f8!important;
	background-image: none;
}

table.dataTable .display_header th {
	padding-right: 18px!important;
	background-position-x: calc(100% - 2px)!important;
}

table.dataTable .display_header th:first-child {
	padding-left: 5px!important;
	padding-right: 5px!important;
	text-align: center
}

.pm-info.card-info .card-num {
    font-size: 1.2em;
}
    
.pm-info.card-info .account-num {
	font-size: 1em;
}

#searchResultsDiv .tableFooter, #searchResultsDiv .tableHeaderTop {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin-left: -5px !important;
}

@media screen and (min-width: 1370px) {
    .make-payment-express .cp-item-bulletin {
        left: 650px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
    .make-payment-express .cp-item-bulletin {
        left: 650px;
    }
}

@media screen and (max-width: 1333px) {
    .make-payment-express .cp-item-bulletin {
        display: none;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1333px) {
    .tab-content.tab-CC .cp-item-row.error-target .cp-item-row-content-col,
    .tab-content.tab-DC .cp-item-row.error-target .cp-item-row-content-col {
        width: 50%;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1369px) {
    .pm-info.card-info .card-num {
        font-size: 1.2em;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1215px) {
	.right-column-bulletin, .bulletin {
	    width: 720px;
	}
	
	.bill-summary {
	    width: 100%;
	}

    .cart-container, .did-you-know, .bill-summary {
    	padding-right: 0px !important;
	}
}

@media screen and (max-width: 1024px) {
    .pm-info.card-info .card-num {
        font-size: 1.2em;
    }
	
	.pm-info.card-info .account-num {
		font-size: 1em;
	}
	
	.mobile-actions {
	    right: 24px;
	}
}

@media only screen and (min-width: 481px) and (max-width: 1024px) {
    .tab-content.tab-CC .cp-item-row.error-target .cp-item-row-content-col,
    .tab-content.tab-DC .cp-item-row.error-target .cp-item-row-content-col {
        width: 50%;
    }
}

@media screen and (max-width: 800px) {
    .pane-multiPaymentDetail .cp-item-row .cp-item-row-content-col.col-2-left, 
    .pane-paymentDetail .cp-item-row .cp-item-row-content-col.col-2-left,
	.pane-paymentConfirm .cp-item-row .cp-item-row-content-col.col-2-left {
        width: 100%;
    }
}

@media screen and (max-width: 699px) {
	body.multipay .table-container.responsiveTable td:before, body.component .table-container.responsiveTable td:before {
	    color: var(--pay-table-heading-font-color);
	}
}

@media screen and (max-width: 599px) {
    .table-container.responsiveTable td:before {
		white-space: normal;
	}
}

@media screen and (max-width: 480px) {
    body.multipay .table-container td.paymentDateCol .radioContainer .standard-label-msg {
        padding-left: 20px;
    }
    
    .table-container.responsiveTable td {
		font-size: 11px;
	}
	
	.mobile-actions {
	    right: 12px;
	}
}

@media screen and (max-width: 599px) {
    div#BUSTAX-businessTaxCategoryGroup-businessTaxOptions-fields div[style*="display: flex"] div[style*="flex-basis:"]:has(input),
    div#PPTAX-businessTaxCategoryGroup-businessTaxOptions-fields div[style*="display: flex"] div[style*="flex-basis:"]:has(input),
    div#REALTAX-propertyTaxCategoryGroup-propertyTaxOptions-fields div[style*="display: flex"] div[style*="flex-basis:"]:has(input),
    div#PUBLICSVCE-businessTaxCategoryGroup-businessTaxOptions-fields div[style*="display: flex"] div[style*="flex-basis:"]:has(input),
    p#lct-search-field-or-text-rotp {
        flex-basis: 100% !important;
    }
}


