/* =============================================================
   Order: 
   		1) Reset
   		2) Variables
   		3) Base
   		4) Layout
   		5) Components
   		6) Pages
   		7) Utilities
   		8) Responsive
   Notes:
   - This is the structure we want to adopt going forward. It is
   	 intended to standardise our styling and make future updates
   	 simpler.
   ============================================================= */

/******************************/
/* 1) Reset                   */
/******************************/
* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
}

:focus {
	outline: none;
}

/******************************/
/* 2) Variables (:root)       */
/******************************/
:root {
	/* Legacy palette */
	--unnamed-color-80c92c: #80C92C;
	--unnamed-color-848484: #848484;
	--unnamed-color-00ada5: #00ADA5;
	--unnamed-color-05c3e0: #05C3E0;
	--unnamed-color-d5d5d5: #D5D5D5;
	--warning-yellow-ff9b24: #FF9B24;
	--unnamed-color-002c41: #002C41;
	--unnamed-color-da1b60: #DA1B60;
	--unnamed-color-0083c2: #0083C2;
	--unnamed-color-0081c4: #0081C4;
	--unnamed-color-000000: #000000;
	--unnamed-color-ffffff: #FFFFFF;
	--unnamed-color-02528b: #02528B;
	--background-f4f4f4: #F4F4F4;
	--unnamed-color-d2d2d2: #D2D2D2;
	--8f8f8f-icons: #8F8F8F;
	--unnamed-color-707070: #707070;
	--unnamed-color-05c3de: #05C3DE;
	--error-d50032: #D50032;
	--success-009a44: #009A44;
	
	/* 2025 Rebrand */
	/* Primary */
	--sky-blue: #0099ff;
	--grassroots-green: #91e200;
	--grassroots-green-hover: #7FC600;
	--white: #FFFFFF;
	
	/* Secondary */
	--horizon-blue: #33ccff;
	--business-blue: #006699;
	--tech-slate: #3e5766;
	--signal-orange: #ff6600;
	--fresh-aqua: #00ffcc;
	--pulse-magenta: #cc00cc;
	--vivid-violet: #6633cc;
	--midnight-blue: #003399;
	
	/* Blue palette */
	--button-blue: #003f6a;
	--dark-blue: #005288;
	
	 /* Grey palette */
	--grey-color-637b87: #637b87;
	--grey-color-869ba3: #869ba3;  /* fixed duplicate */
	--grey-color-9fa7aa: #9fa7aa;
	--grey-color-cccece: #cccece;
	--grey-color-e2e2e2: #e2e2e2;
	--grey-color-f2f2f2: #f2f2f2;
	--grey-color-f7f7f7: #f7f7f7;
	--white-grey :#eeeeee;
	
	
	/* Conveniences */
	  --primary-color: var(--sky-blue);
	  --secondary-color: var(--unnamed-color-0083c2);
	  --accent-color: var(--grassroots-green);
	  --accent-color-hover: var(--grassroots-green-hover);
	  
	/* Paginator */
	--paginator-primary-blue: #1a5f8f;
	--paginator-light-blue: #88cfff;
	--paginator-light-blue-hover: #55bbff;
	--paginator-dark-blue: #2C5F7C;
	--paginator-hover-bg: #f0f0f0
}

/******************************/
/* 3) Base / Global           */
/******************************/
body.ui-widget, body .ui-widget {
	font-family: inherit !important;
}

*:focus {
	outline: none !important;
	box-shadow: none !important;
}

.ui-icon {
	padding-right: 0;
}

.icon-rounded {
	--badge-size: 35px;
	--icon-size: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--badge-size);
	height: var(--badge-size);
	border-radius: 50%;
	background: var(--accent-color);
	font-size: var(--icon-size);
	color: var(--button-blue);
	box-shadow: 0 2px 6px rgba(3, 27, 40, 0.12);
	vertical-align: middle;
}

.capitalise {
	text-transform: capitalize;
}

.ui-button-text {
	text-transform: capitalize;
}

.scap-tabbed-overview .scap-overview-detail-info {
	font-weight: normal !important;
}

body .ui-panelgrid .ui-panelgrid-cell {
	padding: 4px 10px;
}

button {
	padding: 5px !important;
	font-size: 16px !important;
}

/******************************/
/* 4) Layout (structure)      */
/******************************/
/* Header (container-level) */
header, #main-menu {
	background-color: var(--primary-color);
	border-bottom: 1px solid #ffffff;
}

header .logo img {
	margin-top: 8px !important;
	transform: scale(1.3);
}

.logo-item {
	padding-left: 0;
	padding-right: 0;
}

.logo-img {
	height: 25px;
	width: 90px;
	display: inline-block;
	transform: scale(2.1);
}

.custom-menu {
	margin-left: -15px;
}

/* Footer */
footer {
	padding: 1.5rem !important;
	line-height: 1.5rem;
	background-color: var(--primary-color);
	border-top: 1px solid #ffffff;
}

footer small {
	font-size: 90%;
	padding-top: 0.7rem;
}

footer small a:hover {
	color: #ffffff;
}

.scap-footer {
	display: block;
	text-align: left;
}

.scap-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem;
}

.scap-footer-links a+a::before {
	content: "|";
	margin: 0 .2rem;
}

.scap-footer-copy {
	display: block;
	margin-top: .5rem;
}

/* Containers */
.composite-container {
	margin: 20px 12px 12px;
	border-radius: 12px;
	background-color: #ffffff;
}

#container-header {
	font-weight: normal !important;
}

#container-header::first-word {
	font-weight: bold !important;
}

.content-wrapper {
	margin: 20px;
}

.row {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	background-color: #ffffff !important;
}

/******************************/
/* 5) Components              */
/******************************/
/* 5.1 Dialogs */
.ui-dialog {
	top: 100px !important;
}

.ui-dialog-content {
	padding: 25px;
}

.ui-confirm-dialog-message {
	margin-left: 30px !important;
	margin-top: 5px !important;
    line-height: 1.7 !important;
}

.ui-icon .ui-confirm-dialog-severity {
	font-size: 2rem;
	margin-right: .5rem;
	display: inline-block;
	vertical-align: middle;
}

.noBtn.ui-button:hover {
	background-color: #f9f9f9 !important;
}

.scap-status-dialog .ui-widget-content {
	background: none !important;
}

/* 5.2 Dialogs — spinner */

.scap-status-dialog .ui-dialog-content {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	padding: 0;
}

.scap-status-dialog .ui-dialog-content img {
	display: block;
	margin: auto;
	max-width: 25%;
	height: auto;
}

body .ui-widget-overlay {
	background: var(--grey-color-f2f2f2);
}

/* 5.3 Messages / Notification Bar */
.ui-messages-info {
	background: var(--primary-color) !important;
	bottom: -15px !important;
}

.ui-messages-warn {	
	bottom: -15px !important;
}

.ui-messages-error {	
	bottom: -15px !important;
}

.ui-messages-close {
	background: none !important;
}

body .ui-messages .ui-messages-close .ui-icon-close:before {
	content: none;
}

body .ui-messages .ui-messages-close {
	right: 1rem;
	top: 1rem;
}

body .ui-messages .ui-messages-error .ui-messages-close, body .ui-messages .ui-messages-fatal .ui-messages-close
	{
	background: var(--accent-color);
	color: white;
}

.scap-acknowledge-block {
	padding: 15px !important;
}

.scap-acknowledge-block .scap-ack-message-error {
	font-size: 18px;
	line-height: 40px;
}

.scap-acknowledge-block button {
	font-size: 13px !important;
}

/* 5.4 Buttons */
.ui-button {
	background: var(--accent-color) !important;
	color: var(--button-blue) !important;
	border: none !important;
	border-radius: 8px !important;
	min-width: 175px;
	transition: background-color .3s, transform .3s;
}

.ui-button:hover {
	background-color: var(--accent-color);
	transform: scale(1.05);
}

.ui-button:disabled {
	background-color: #f3f3f3 !important;
	color: #2c2c2cad !important;
	cursor: default !important;
}

button:focus, .ui-button:focus, .ui-state-active {
	outline: none !important;
	box-shadow: none !important;
}

.scap-cancel-button, .ui-confirmdialog-no {
	background-color: white !important;
    color: var(--sky-blue) !important;
    border: 2px solid var(--sky-blue) !important;
}

.scap-decision-buttons {
	display: flex;
	gap: 16px;
	margin-top: 20px;
}

.scap-download-button {
	margin: 8px !important;
}

.ui-button .ui-button-text, .ui-button .ui-button-label {
	font-family: Telkom123-Bold, ui-sans-serif, system-ui, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
		"Noto Color Emoji";
}

body .ui-button.ui-button-icon-only {
    min-width: auto;
}

/* 5.5 Menubar / Menu */
.ui-menu {
	border-radius: 0 !important;
}

.ui-menubar {
	background-color: var(--sky-blue) !important;
}

.ui-menu .ui-menuitem-link {
	display: inline-block;
}

.ui-menuitem-text {
	color: white !important;
}

.ui-menu-parent>ul>.ui-menuitem .ui-menuitem-text {
	color: black !important;
}

.custom-menu .ui-icon-triangle-1-s:last-child, .logout_button .ui-icon-triangle-1-s:last-child
	{
	color: white !important;
}

.ui-menubar .ui-menuitem:hover, .ui-menubar .ui-menuitem:focus>.ui-menuitem-link
	{
	box-sizing: border-box;
}

body .ui-menu .ui-menu-list .ui-menuitem.ui-menuitem-active>.ui-menuitem-link
	{
	background: var(--accent-color);
}

.ui-menuitem-link {
	transition: none;
}

.ui-menuitem-link:hover {
	transform: none;
	font-weight: normal !important;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
	.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus
	{
	font-weight: normal !important;
}
/* Logout dropdown */
.custom-logout {
	top: 20px !important;
}

.logout_button .ui-selectonemenu {
	vertical-align: middle;
}

.custom-selectonemenu {
	vertical-align: middle;
	margin-top: -5px;
}

.logout_button .ui-selectonemenu .ui-selectonemenu-label {
	background-color: var(--accent-color);
	padding-top: 5px;
}

.logout_button .ui-inputfield {
	color: white !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
	background-image: none !important;
}
/* Email list dropdown panel */
#serviceSelectionForm\:serviceSelection_panel .ui-selectonemenu-items .ui-selectonemenu-item
	{
	color: white !important;
}

/* 5.6 Breadcrumb */
.ui-breadcrumb {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.ui-breadcrumb-items .ui-menuitem-text {
	color: black !important;
}

.ui-breadcrumb-home-icon:hover, .ui-breadcrumb-items .ui-menuitem-text:hover
	{
	color: var(--primary-color) !important;
}
/* Legacy */
.legacy_breadcrumb .ui-breadcrumb-items .ui-menuitem-text {
	color: white !important;
}

.legacy_breadcrumb .ui-breadcrumb-items .ui-menuitem-text:before {
	color: white !important;
}

body .legacy_breadcrumb .ui-breadcrumb-items li:first-child a.ui-icon-home {
	color: white;
}

body .legacy_breadcrumb .ui-breadcrumb-items li:not(.ui-breadcrumb-chevron):before {
	color: white !important;
}

.legacy_breadcrumb {
	padding-top: 20px !important;
}

/* 5.7 Tables / DataTable */
.ui-datatable thead th {
	background-color: white !important;
}

body .ui-datatable .ui-datatable-data>tr>td {
	padding: 1rem;
	border: 1px solid rgba(0, 0, 0, .08);
	border-width: 1px 0;
}

body .ui-datatable .ui-datatable-data>tr .ui-row-toggler:focus, body .ui-datatable .ui-datatable-data>tr .ui-button:focus
	{
	box-shadow: none;
}

.ui-datatable tbody tr td:has(> .ui-row-toggler) {
    overflow: visible !important;
}

body .ui-datatable .ui-paginator.ui-paginator-bottom {
	border: none;
}

/* 5.8 Forms & Controls */
/* .ui-chkbox-box {
	background-color: var(--accent-color) !important;
} */
.ui-chkbox .ui-chkbox-box {
	border-radius: 5px !important;
	border: 2px solid var(--accent-color) !important;
}

.ui-chkbox-box,
.ui-chkbox .ui-chkbox-box.ui-state-active,
.scap-data-table .ui-chkbox .ui-state-default {
	border-color: var(--accent-color) !important;
	background-color: var(--accent-color) !important;
}

.ui-chkbox .ui-chkbox-box.ui-state-hover {
	background-color: var(--accent-color-hover) !important;
	border-color: var(--accent-color-hover) !important;
}

body .ui-chkbox .ui-chkbox-box.ui-state-focus {
	box-shadow: none;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active {
	color: var(--button-blue);
}

.ui-selectonemenu-items-wrapper {
	box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
	background-color: var(--accent-color) !important;
}

body .ui-selectonemenu.ui-state-focus {
	outline: none;
	box-shadow: none;
}

.ui-selectonemenu .ui-selectonemenu-trigger, .p-selectonemenu .p-selectonemenu-trigger
	{
	border-bottom: 0 !important;
}
/* Datepicker trigger */
.usage-form .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
	color: #6c757d !important;
}

.ui-button-icon-left.ui-icon.ui-icon-calendar {
	margin-left: 3px !important;
}

.ui-datepicker-trigger {
	left: -40px;
	background: transparent !important;
}

/* 5.9 Progress Bar */
.custom-progressbar.ui-progressbar {
	height: 15px;
	border: 0;
	background: #D2D2D2;
	border-radius: 9999px;
}

.custom-progressbar.ui-progressbar .ui-progressbar-value {
	background: #05C3DE;
	background-image: none !important;
	box-shadow: none !important;
	border-radius: 9999px !important;
}

.custom-progressbar.email-usage-info .ui-progressbar-value {
	background: #05C3DE;
}

.custom-progressbar.email-usage-warning .ui-progressbar-value {
	background: var(--warning-yellow-ff9b24);
}

.custom-progressbar.email-usage-danger .ui-progressbar-value {
	background: var(--error-d50032);
}

.custom-progressbar.email-usage-success .ui-progressbar-value {
	background: #22c55e;
}

.custom-progressbar.ui-progressbar .ui-progressbar-label {
	display: none !important;
}

/* 5.10 Tooltips */
.helper-text {
	left: 100% !important;
}

/* 5.11 Accordion & Panels */
.ui-accordion .ui-accordion-header, .scap-info-table .ui-widget-header h3
	{
	color: var(--secondary-color) !important;
}

.ui-accordion .ui-accordion-header:hover {
	font-weight: bold !important;
}

.scap-info-table .ui-panelgrid-header .ui-widget-header {
	background: transparent;
	color: #0083c2;
	border: none;
	border-bottom: 1px lightgrey solid !important;
	text-align: left;
}

/* 5.12 Paginator & Misc */
.scap-paginated-table .ui-icon-triangle-1-s:last-child {
	color: #495057 !important;
}

/* Main paginator container */
.ui-paginator {
    background: transparent !important;
    border: none !important;
    padding: 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Previous and Next buttons - circular with light blue background */
.ui-paginator-first,
.ui-paginator-prev,
.ui-paginator-next,
.ui-paginator-last {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: var(--paginator-light-blue) !important;
    border: none !important;
    color: var(--paginator-dark-blue) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

.ui-paginator-first:hover,
.ui-paginator-prev:hover,
.ui-paginator-next:hover,
.ui-paginator-last:hover {
    background: var(--paginator-light-blue-hover) !important;
}

/* Page numbers container */
.ui-paginator-pages {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 12px !important;
}

/* Individual page number buttons */
.ui-paginator-page {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    color: var(--paginator-primary-blue) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Active page styling - outlined box */
.ui-paginator-page.ui-state-active {
    background: transparent !important;
    border: 2px solid var(--paginator-primary-blue) !important;
    color: var(--paginator-primary-blue) !important;
}

/* Page hover effect */
.ui-paginator-page:hover:not(.ui-state-active) {
    background: var(--paginator-hover-bg) !important;
}

/* Ellipsis styling */
.ui-paginator-pages .ui-paginator-ellipsis {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--paginator-primary-blue) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Disabled state */
.ui-paginator-first.ui-state-disabled,
.ui-paginator-prev.ui-state-disabled,
.ui-paginator-next.ui-state-disabled,
.ui-paginator-last.ui-state-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Rows per page dropdown styling - light blue background with rounded corners */
.ui-paginator-rpp-options.ui-widget.ui-state-default.ui-corner-left,
.ui-paginator .ui-paginator-rpp-options.ui-widget,
.ui-paginator .ui-paginator-rpp-options {
    display: flex !important;
    align-items: center !important;
    margin-left: 12px !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 60px !important;
    max-width: 70px !important;
    height: 48px !important;
    border-radius: 8px !important;
    background: var(--paginator-light-blue) !important;
    border: none !important;
    color: var(--paginator-dark-blue) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 0 8px !important;
    cursor: pointer !important;
}

.ui-paginator-rpp-options.ui-widget.ui-state-default.ui-corner-left:hover,
.ui-paginator .ui-paginator-rpp-options:hover {
    background: var(--paginator-light-blue-hover) !important;
}

/* Target the native select element inside */
.ui-paginator-rpp-options select,
.ui-paginator-rpp-options.ui-widget select {
    width: 100% !important;
    height: 44px !important;
    border: none !important;
    background: transparent !important;
    color: var(--paginator-dark-blue) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 0 4px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    text-align: center !important;
}

body .ui-selectonemenu {
	border-radius: 0;
}

.button-spacing {
	margin-right: 10px;
}

.flex-container {
	display: flex;
	gap: 20px;
}

.filtered-table .ui-column-customfilter>div:not (.unfiltered-column ) {
	padding: 0;
	min-width: auto !important;
	width: auto !important;
}

.scap-data-table .filtered-table .ui-selectonemenu {
	width: 100% !important;
}

.filtered-table .ui-paginator {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

/******************************/
/* 6) Reusable Icons & Refresh */
/******************************/
.refresh-button {
	background-image:
		url("/portal/javax.faces.resource/gfx/connectivity/refresh.svg.jsf")
		!important;
	width: 35px !important;
	height: 35px;
	min-width: auto;
	background-color: transparent !important;
	text-align: center;
	color: #0083c2 !important;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	left: 98%;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	border: none !important;
}

/******************************/
/* 7) Pages (scoped rules)    */
/******************************/
/* 7.1 Error Page */
.system-error {
	display: flex;
}

.error-button {
	width: 200px;
}

.error-button .ui-button-text {
	font-weight: bold;
}

/* 7.2 Search Page */
/* (commented custom button rules preserved for future) */

/* 7.3 Overview Page */
.scap-tabbed-overview {
	margin-top: 14px;
}

.scap-tabbed-overview-heading {
	font-weight: bold !important;
}

.scap-tabbed-overview li.ui-state-active {
	background: var(--accent-color) !important;
}

.scap-tabbed-overview li.ui-state-default a {
	color: #889391 !important;
}

.scap-tabbed-overview li.ui-state-active a {
	color: var(--button-blue) !important;
}

.scap-tabbed-overview li.ui-state-disabled {
	opacity: 1 !important;
	margin: 15px 30px 15px 0 !important;
	padding: 0 !important;
}

.scap-tabbed-overview li.ui-state-disabled a {
	color: black !important;
	font-size: 25px;
	font-weight: 100;
	margin: 0 !important;
	padding: 0 !important;
}

body .ui-tabs.ui-tabs-top>.ui-tabs-nav li.ui-tabs-header {
	top: 0;
	border-bottom: none;
}

.ui-tabs .ui-tabs-nav:before {
	border-bottom: none !important;
}

/* 7.4 Connectivity Page */
.scap-data-table .ui-button .ui-button-text:hover {
	background-color: var(--accent-color) !important;
	color: var(--button-blue) !important;
	border-radius: 25px !important;
}

/* 7.5 Email Page */
.scap-info-table .ui-datatable-header {
	background: transparent !important;
}

body .rounded-button.ui-button-flat {
	background: none !important;
	border: none;
	border-radius: 50%;
	/* color: var(--accent-color) !important; */
	width: 2em;
	height: 2em;
	padding: .25em;
}

.email-service-table {
	padding-left: 0 !important;
}

.scap-data-table-carousel-account-states {
	padding-left: 0 !important;
}

body .rounded-button.ui-button-flat:hover {
	color: var(--accent-color);
}

.rounded-button.ui-button-flat .pi {
	font-size: 1.5em;
}

.serviceDescriptionGrid {
	margin-left: 34px !important;
}

.serviceDescriptionGrid .ui-panelgrid-cell {
	padding: 14px !important;
}

.email-service-description {
	color: #000000;
	font-size: 14px;
	font-weight: bold;
}

.email-account-info h1 {
	font-size: 50px;
	font-weight: bold;
	color: #707070 !important;
	margin-bottom: 25px;
}

.account-allocation-detail, .account-remaining-detail {
	font-size: 14px;
	color: #333;
	margin-top: 20px;
}

.account-remaining-detail {
	color: #004080;
}

/* 7.6 Hosting Page */
.rounded-button .ui-button-flat {
	/* placeholder for hosting-specific overrides */
	
}

/* 7.7 Profile Page */
body .rounded-button.ui-button-flat .ui-button-text:hover {
	background-color: transparent !important;
}

/* 7.8 Audit Page */
.scap-paginated-table .ui-icon-triangle-1-s:last-child {
	color: #495057 !important;
}

/* 7.9 Group Management Page */

.scap-group-management-button {
	min-width: 100px;
	margin-right: 5px !important;
}


/******************************/
/* 8) Utilities               */
/******************************/
.back-button {
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 1 !important;
	color: var(--button-blue) !important;
	background-color: transparent !important;
	border: none !important;
	min-width: auto;
}

.back-button:hover {
	color: var(--button-blue) !important;
	font-weight: bold !important;
}

.back-button:hover .pi {
	font-weight: bold !important;
}

.back-button:focus {
	box-shadow: none !important;
	outline: none !important;
}

.scap-info-table .ui-widget-header {
	background: transparent;
	color: #0083c2;
	border: none !important;
	text-align: left;
	padding-left: 0 !important;
}

body .ui-panelgrid .ui-panelgrid-cell.ui-widget-header {
	background: transparent !important;
}

.scap-info-table .ui { /* reserved */
	
}

body .ui-panelgrid .ui-panelgrid-cell {
	color: #000000;
}

.ui-state-highlight {
	background: #ffffff !important;
}

.ui-float-label {
	width: 100%;
}

.full-width {
	width: 100% !important;
}

/******************************/
/* 9) Responsive              */
/******************************/
@media ( max-width : 768px) {
	.ui-button {
		width: 100%;
	}
	.content-wrapper {
		margin: 10px;
	}
}