.padding-left-60
{
    padding-left: 60px !important;
}
/* Hiding the Optional (after pseudoattributes) from the labels for the New Form Changes*/
.disappear:after 
{
    display: none;
} 

/* Notes: Hide the postedby and createdby columns from the rows */
.entity-notes .metadata {
    display: none;
}

/* RadioButtons: Adapt to match boilerplate */
.form-item--radio__item > input[type="radio"] {
    display: none;
}
.form-item--radio__item > label {
    width: 100% !important;
    /* FLOAT: left !important; */
}

/* ValidationAlert: Set error message text colour */
.validation-summary.alert.alert-error a,
.validation-summary.alert.alert-danger a {
    color: #fff !important;
    color: var(--c-text-inverse) !important;
}

/* btn-default: Click and drag */
.btn-default:active:focus,
.btn-default:active:hover {
    color: #111;
    color: var(--c-button-default-active-color);
}

/* CheckboxLabel: Keep the text aligned */
.form-item--checkbox__item > label {
    display: block !important;
    width: 100% !important;
}

/* General buttons: Width is not matching boilerplate */
.actions .btn {
    width: initial !important;
    min-width: initial;
}

/* Navigation bar: Breadcrumbs have underline on boilerplate but not portal */
nav[role="navigation"] ul.breadcrumb li.breadcrumbs__item:not(:last-child) {
    text-decoration: underline;
    cursor: pointer;
}

/* Navigation bar: Breadcrumb link font-size/font-weight */
nav[role="navigation"] ul.breadcrumb li.breadcrumbs__item {
    font-size: 1.6rem;
    font-weight: initial;
	width: fit-content;
}

/* Search: Hovering over the 'x' button adds extra spacing */
.button--close-search:hover, .button--close-search:focus {
    min-width: initial !important;
}

/* Footer: Social links missing the rounding */
.footer__social a.social-menu__link {
    margin-left: 0 !important;
}
.footer__social li.social-menu__item {
    margin-right: 2.3rem;
}

/* Subgrids: Sort icons are misaligned with the text in the <th> */
th span.fa {
    top: 0px !important; /* Change from 1px */
    font-size: 1.7rem !important; /* Change from 1.8rem */
}

/* Form: Select fields */
select option {
    min-height: 1.2em;
}

/* Attach evidence: Button widths */
.modal-footer .btn {
    width: initial !important;
    min-width: initial;
    float: left;
}

/* Attach evidence: Items spilling outside the grid */
.entity-notes {
    margin-left: -1rem;
    margin-right: -1rem;
    flex-wrap: wrap;
}
.entity-notes::before,.entity-notes::after {
    content: " ";
    display: table;
}
.entity-notes::after {
    clear: both;
}

/* Attach evidence: Button style does not match theme */
.entity-notes a.addnote .fa {
    text-decoration: none;
    font-size: 0.9em;
    margin-right: 5px;
}
.entity-notes a.addnote {
    min-width: initial;
    width: initial;
    float: none !important;
    cursor: pointer;
    color: #fff;
    color: var(--c-button-default-color);
    text-decoration: none;
}
.entity-notes a.addnote:hover:not(:active) {
    color: #fff;
    color: var(--c-button-default-color);
    text-decoration: none;
}
.entity-notes a.addnote:active,
.entity-notes a.addnote:focus:hover {
    background-color: #ef7d00;
    background-color: var(--c-button-default-active-bg);
    color: #111;
    color: var(--c-button-default-active-color);
}
.entity-notes a.addnote:focus {
    color: #fff;
    color: var(--c-button-default-color);
    background-color: #00668b;
    background-color: var(--c-button-default-bg)
}

/* Attach evidence: Remove unwanted background from file download */
.attachment.alert {
    background-color: transparent;
    padding: 0px;
}

/* Attach evidence: Keep download icon same size as file label */
.attachment.alert span.fa {
    top: 0px !important; /* Change from 1px */
    font-size: 1.7rem !important; /* Change from 1.8rem */
}
.attachment.alert span.fa:hover {
    text-decoration: none;
}

/* Attach evidence: Note items are not aligned properly */
.entity-notes { display:block !important; }
.notes { display:block; }
.notes .note { display:block; }
.notes .note .row { display:block; }
.notes .note .row .content { display:block; max-width: 100% !important; }
.notes .note .row .content .text { display:block; max-width: 85% !important; }
.notes .note .row .content .attachment { display:block; }
.note-actions.row { display:block; max-width: 100% !important; width: 100%; padding-top: 1.5rem; }
.note-actions.row > div { display:inline-block; }

/* Attach evidence: Image in modal window is on top of the other elements */
.modal-body .editnote .form-control-static .attachment div.img { display: block; }

/* Noise or Nuisance: Next button on first page width */
#InsertButton.btn.btn-primary.button { width: auto; min-width: initial; }
#UpdateButton.btn.btn-primary.button { width: auto; min-width: initial; }

/* Email Subscriptions: Unsubscribe button colours */
.form-action-container-left input[type="button"] { width:initial; min-width:initial; }

/* Email Subscriptions: Dropdown buttons taking up additional width */
.entity-grid.subgrid .dropdown.action button.btn { width: initial; min-width: initial; }

/* Email Subscriptions: Align edit/delete buttons to right */
.entity-grid.subgrid .dropdown.action button.btn { float: right; }
.entity-grid.subgrid .dropdown.action .dropdown-menu { transform: translate(43px, 45px); }

/* Forms: Some labels are unintentionally right aligned */
.entity-form .form-control-cell .info label.field-label,
.form-label,
.field-label {
    display: block;
    float: none;
    FLOAT: none;
    width: auto !important;
}

/* Forms: Checkbox alignment */
.entity-form .checkbox-cell ul { padding-left: 2.8rem; }

/* My Activity -> Case Details: Prevent the text going outside of the card */
.responsive-table {
    padding-left: 4rem;
    padding-right: 4rem;
}
.responsive-table .table-row * {
    width: 100%;
}

/* My Activity table: Hide the column headers while the table is loading. */
/* This relies on the javascript on this page that is setting the table "id" attribute. */
.entity-list-table .entitylist.entity-grid table:not([id]) thead {
    display: none;
}

/* My Activity table: Readability */
.entity-list-table .entitylist.entity-grid table th { padding:2.4rem; vertical-align:middle; font-weight: 700; }
.entity-list-table .entitylist.entity-grid table td { padding:2.4rem; vertical-align:middle; font-weight: 400; }
.entity-list-table .entitylist.entity-grid table button { display: inline-block; }
.entity-list-table .entitylist.entity-grid .view-select .title { font-weight:700; }
.entity-list-table .entitylist.entity-grid .view-empty.message { text-align:left; font-weight:400; }
.entity-list-table .entitylist.entity-grid .view-access-denied.message { text-align:left; font-weight:400; }
.entity-list-table .entitylist.entity-grid .view-loading.message { font-weight:400; }
/* .entity-list-table .entitylist.entity-grid .dropdown.action button { min-width:50%; max-width:50%; } */

/* Post a comment: "Attach a file" alignment */
.entity-form .file-cell .info label { FLOAT: left; }

/* Search spinner: Add some space between the icon and the text */
.button-search-spinner .fa.fa-spinner { margin-right:5px; font-size:1rem; }


/* Add comment: Form has borders applied */
.crmEntityFormView table { border-color: transparent; }
.crmEntityFormView td.cell { border-color: transparent; }

/* RBKC Checkbox: fix cannot focus */
.form-item--radio__item [type="radio"] {
    display: inline !important;
    position: absolute;
    opacity: 0;
    margin: 0 !important;
    padding: 0 !important;
    height: 0;
    width: 0;
}


/* B2C: Increase spacing between controls */
.attrEntry {
    margin: 2rem 0;
}

/* B2C: Data Protection message */
.b2c-data-protection-message-container {
    margin-top: 2rem;
    margin-bottom: 1rem;
}


/* Date picker: colour issues */ 
.datepicker thead * {
    color: white;
}
.datepicker thead th,
.datepicker thead .dow {
    background-color: var(--c-button-default-bg);
    color: white;
    border-radius: 0;
}
.datepicker thead th:focus,
.datepicker thead .dow:focus, 
.datepicker thead .picker-switch:focus, 
.datepicker thead .prev:focus,
.datepicker thead .next:focus,
.datepicker thead th:hover,
.datepicker thead .dow:hover,
.datepicker thead .picker-switch:hover,
.datepicker thead .prev:hover,
.datepicker thead .next:hover {
    background-color: var(--c-button-default-hover-bg) !important;
}
.datepicker .day,
.datepicker .month,
.datepicker .year, 
.datepicker .decade { 
    border-radius: 0;
}
.datepicker td.day.today button::before {
    border-bottom-color: var(--c-button-default-bg);
}
.datepicker td.day.active,
.datepicker td.day.active button {
    background-color: var(--c-button-default-bg);
}
.datepicker td.day:hover,
.datepicker td.day.active:hover,
.datepicker td.day:hover button,
.datepicker td.day.active:hover button {
    background-color: var(--c-button-default-hover-bg);
}
.datepicker td.day:hover button {
    background-color: transparent;
}
.datepicker .decade.active,
.datepicker .year.active,
.datepicker .month.active {
    background-color: var(--c-button-default-bg);
}
.datepicker .decade.active button,
.datepicker .year.active button,
.datepicker .month.active button {
    color: white !important;
}
.datepicker .decade:hover,
.datepicker .year:hover,
.datepicker .month:hover {
    background-color: var(--c-button-default-hover-bg);
}
.datepicker .decade:hover button,
.datepicker .year:hover button,
.datepicker .month:hover button {
    color: white !important;
}
.datepicker th,
.datepicker td {
    margin: 2px;
}
.datepicker .day button {
    background-color: transparent;
}
.datepicker .day.old button,
.datepicker .day.new button {
    color: #666;
}


/* Date picker: Add the "Select date" / "Select time" text */
.datetimepicker a[data-action="togglePicker"] span.icon-time:after { content: "Select time"; }
.datetimepicker a[data-action="togglePicker"] span.icon-calendar:after { content: "Select date"; }
.datetimepicker a[data-action="togglePicker"] {
    background-color: var(--c-button-default-bg);
    color: white;
    text-decoration: none;
}
.datetimepicker a[data-action="togglePicker"] span.fa:before,
.datetimepicker a[data-action="togglePicker"] span.fa:after { display: inline-block; }
.datetimepicker a[data-action="togglePicker"] span.fa:after {
    font-family: "Source Sans Pro",sans-serif;
    margin-left: 0.75rem;
    vertical-align: top; /* Important: This keeps text vertically aligned with the icon */
}
.datetimepicker a[data-action="togglePicker"]:hover { 
    background-color: var(--c-button-default-hover-bg); 
    color: white;
}
.datetimepicker a[data-action="togglePicker"] span {
    display: block;
    margin: 0;
    border-radius: 0;
}
.datetimepicker a[data-action="togglePicker"] {
    display: block;
    margin: 0;
    padding: 0 !important;
}
.datetimepicker a[data-action="togglePicker"] span,
.datetimepicker a[data-action="togglePicker"] span:hover { background-color: transparent; }

/* Time picker: resolve alignment issues */
.timepicker div[class^="timepicker-"] table.table-condensed,
.timepicker div[class^="timepicker-"] table.table-condensed tr {
    display: block;
}
.timepicker div.timepicker-picker table.table-condensed tr td {
    padding: 13px;
}
.timepicker div.timepicker-hours table.table-condensed tr td,
.timepicker div.timepicker-minutes table.table-condensed tr td {
    padding: 0.43rem;
}
.timepicker div.timepicker-picker table.table-condensed tr td button[data-action="togglePeriod"] { 
    margin: 16px 0 !important;
    font-weight: 700;
}
.timepicker div.timepicker-picker table.table-condensed tr td button[data-action="togglePeriod"],
.timepicker div.timepicker-picker table.table-condensed tr td:hover button[data-action="togglePeriod"] { 
    background-color: var(--c-button-default-bg); 
    color: white;
}
.timepicker div.timepicker-picker table.table-condensed tr td button:hover[data-action="togglePeriod"] { background-color: var(--c-button-default-hover-bg); }

.datepicker-days table tbody tr:nth-child(odd),
.datepicker-days table tbody tr:nth-child(even) {
    background-color: var(--c-bg-color);
}
.datepicker-days table tbody tr td {
    border-color: #eee;
}

/* Report it landing pages: Add spacing between the description (<p> elements) and the Start now button */
.answer-page-content div.cms.a > form[action] {
    margin-top: 3rem;
}


/* Form validators: Consistent spacing between the required/optional fields */
.crmEntityFormView .cell div.info div.validators {
    display: none
}


/* Modal header: Fix 'x' button when title is hidden */ 
.modal-header h1[style="display:none"]+button.form-close,
.modal-header h1[style="display:none;"]+button.form-close,
.modal-header h1[style="display: none"]+button.form-close,
.modal-header h1[style="display: none;"]+button.form-close {
    position: relative !important;
    right: 0 !important;
}

/* Footer Links: Spacing difference between boilerplate */
li.inline-menu__item a.inline-menu__link {
    margin-left: 0px;
}

/* Social links: Slightly misaligned */
ul.social-menu {
    margin-left: 2px;
}

/* Required field asterisks: Accessibility */
.info.required label.field-label::after {
    color: #A30000 !important; /* important is required */
}

/* Close account: Additional breadcrumbs are not needed */
.page-heading > .container > .breadcrumb {
    display: none;
}

/* Close account: Link is not using correct color */
div.close-account-message a.link {
    color: #0c5399 !important;
    color: var(--c-link-color) !important;
}

/* Council tax and housing benefits: Form submission message text color is incorrect */
#MessagePanel.alert-danger input[type="submit"] {
    display: none;
}
#MessagePanel.alert-danger #MessageLabel,
#MessagePanel.alert-danger #MessageLabel *,
#MessagePanel.alert-danger span.fa::before {
    color: white;
    outline: none;
}


/* Error fields should show the red bar to the left. The red bar does not appear if control is floating. */ 
.crmEntityFormView .cell select.form-control, 
.crmEntityFormView .cell textarea.form-control, 
html[dir=rtl] .crmEntityFormView .cell input[type=text].form-control,
html[dir=ltr] .crmEntityFormView .cell input[type=text].form-control,
html[dir=ltr] .crmEntityFormView .cell input[type=checkbox]+.field-label {
    float:none;
}

/* Remove astreisks beside required fields. */
.crmEntityFormView .cell div.info.required label:after {
    content: '';
}

/* Show " (optional)" beside optional fields. */
.crmEntityFormView .cell div.info:not(.required) label:after {
    content: ' (optional)';
}

/* Remove "optional" from certain fields. */
.crmEntityFormView .cell div.info:not(.required) label[for="rbkc_textmessge"]:after,
.crmEntityFormView .cell div.info:not(.required) label[for="rbkc_message"]:after,
.crmEntityFormView .cell div.info:not(.required) label[for="rbkc_interactioncasereference"]:after {
    content: '';
}


/* RBKC Date/time fields: hide datepicker control */
.rbkc-datepicker-container .datetimepicker { display: none; }