<commit_before>/*

* Not sure where these styles are used. They ware out of sync with the assets frontend

*/
.question {
  margin: 0 0 10px 0;
  padding: 10px 0;
}

.answer {
  margin: 1em 0 0 0;
}

label.selectable {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #F0F0F0;
  padding: 12px 14px 10px 16px;
  border: 1px solid #F0F0F0;
  margin: 1em 1em 0 0;
}

label.selectable input {
  cursor: pointer;
}

.optional-section {
  display: none;
}

.email-form-errors .error-notification {
  display: block;
  font-size: 19px;
  padding: 1em 0 1em 15px;
  margin: 1em 0;
  color: $alert-bg-red;
  border-left: 3px solid $alert-bg-red;
}

.js .email-form-errors .error-notification {
  display: none;
}

.connected,
.answer .optional-section {
  border-left: 3px solid #999;
  float: none;
  margin: 1em 0 0 0;
  padding: 1em 1em 0 15px;
  overflow: hidden;
}

.connected {
  box-sizing: border-box;
}

#content > .full-width {
  width: auto;
  float: none;
}

.important-dates .important-date {
  border-bottom: 1px solid #ccc;
  padding: 1em 0;
}

.important-dates .date-wrap {
  width: 200px;
  margin-right: -200px;
  float: left;
  left: 0;
  top: 0;
  text-align: center;
}

.important-dates .date-wrap time {
  display: block;
}

.important-dates .date-wrap time span {
  display: block;
}

.important-dates .date-wrap time .day {
  font-size: 2.0em;
}

.important-dates .date-wrap time .month {
  font-weight: bold;
}

.important-dates .date-wrap strong {
  color: #fff;
  background: #000;
  padding: 2px 8px;
  display: inline-block;
  margin: 0.2em 0;
}

.important-dates .date-message {
  padding: 0 20px 0 200px;
}

.important-dates .date-message h3, .important-dates .date-message .h3-heading {
  margin-top: 0.3em;
}

.important-dates-wrap .footer-message {
  text-align: center;
  padding: 2em;
}

.has-self-assessment,
.has-corporation,
.has-vat,
.has-paye {
  display: none;
}

body.self-assessment .has-self-assessment,
body.corporation .has-corporation,
body.vat .has-vat,
body.paye .has-paye {
  display: block;
}

.main-nav {
  border-bottom: 1px solid #ccc;
  margin: 2em 0;
}

.main-nav .tab {
  display: inline-block;
  padding: 12px 20px;
  font-size: 19px;
  position: relative;
}

.main-nav .tab.selected {
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 12px 19px 13px 19px;
  background: #fff;
  text-decoration: none;
  color: #000;
  margin-bottom: -1px;
}

.main-nav .messages,
.main-nav .messages.selected {
  padding-right: 40px;
}

.main-nav .messages.no-unread,
.main-nav .messages.selected.no-unread {
  padding-right: 19px;
}

.main-nav .count {
  position: absolute;
  background: $alert-bg-red;
  color: #fff;
  padding: 0.2em;
  font-size: 16px;
  text-decoration: none;
  top: 14px;
  right: 15px;
  line-height: 16px;
}

.full-message {
  width: 64%;
  float: left;
}

.full-message li {
  list-style: disc;
  margin-left: 1.5em;
}

.full-message .date-sent {
  font-size: 16px;
  color: #454a4c;
}

table details {
  margin: 0;
}

/************************* Styling for important notices *************************/

.important-notice {
  padding-left: 2.5em;
  background: no-repeat left top url(../images/icons/icon-important.png);
  font-weight: 700;
}<commit_msg>component-library: unknown styles marked as deprecated, known styles commented<commit_after>/*
Question/Answer

Deprecated: These styles are no longer in use and are awaiting removal

.question - found in prototypes only or in personal repos
.answer   - found in prototypes only or in personal repos
*/

.question {
  margin: 0 0 10px 0;
  padding: 10px 0;
}

.answer {
  margin: 1em 0 0 0;
}


/*
Label

A stylised Label with radio input element.

Markup:
<label class="selectable">
    <input type="radio"/>No thank you
</label>

Styleguide Unknown.Label
*/
label.selectable {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #F0F0F0;
  padding: 12px 14px 10px 16px;
  border: 1px solid #F0F0F0;
  margin: 1em 1em 0 0;
}

label.selectable input {
  cursor: pointer;
}


/*
Optional Section

Deprecated: These styles are no longer in use and are awaiting removal

.optional-section         - found in prototypes only or in personal repos
.answer .optional-section - found in prototypes only or in personal repos
*/
.optional-section {
  display: none;
}


/*
Email Errors

Styles to display email errors. Associated JavaScript can be found in [validation/saEmailPrefs.js](https://github.com/hmrc/assets-frontend/blob/master/assets/javascripts/validation/saEmailPrefs.js#L59)

**Note** the inline style `style="display: block"` has been added to this example because when JavaScript is on this
element is hidden. You do not need to use this inline style in your markup.

Markup:
<div class="email-form-errors">
    <label class="error-notification" style="display: block">
    Enter a valid email address
    </label>
</div>

Styleguide Unknown.Email Errors
*/

.email-form-errors .error-notification {
  display: block;
  font-size: 19px;
  padding: 1em 0 1em 15px;
  margin: 1em 0;
  color: $alert-bg-red;
  border-left: 3px solid $alert-bg-red;
}

.js .email-form-errors .error-notification {
  display: none;
}


/*
Connected

Custom styled email signup form.

Markup:
<fieldset class="connected">
  <label>Email address
    <input type="text" class="input--medium input--cleared"/>
  </label>
  <p>By signing up you:</p>
  <ul class="bullets form-hint">
    <li>want to receive statutory notices, decisions, estimates and
    reminders electronically</li>
    <li>will keep your communications preferences and email address up to
    date</li>
  </ul>
</fieldset>

Styleguide Unknown.Connected
*/
.connected,
.answer .optional-section {
  border-left: 3px solid #999;
  float: none;
  margin: 1em 0 0 0;
  padding: 1em 1em 0 15px;
  overflow: hidden;
}

.connected {
  box-sizing: border-box;
}

#content > .full-width {
  width: auto;
  float: none;
}

/*
Important Dates

Deprecated: These styles are no longer in use and are awaiting removal

.important-dates      - not found
.important-dates-wrap - not found
*/

.important-dates .important-date {
  border-bottom: 1px solid #ccc;
  padding: 1em 0;
}

.important-dates .date-wrap {
  width: 200px;
  margin-right: -200px;
  float: left;
  left: 0;
  top: 0;
  text-align: center;
}

.important-dates .date-wrap time {
  display: block;
}

.important-dates .date-wrap time span {
  display: block;
}

.important-dates .date-wrap time .day {
  font-size: 2.0em;
}

.important-dates .date-wrap time .month {
  font-weight: bold;
}

.important-dates .date-wrap strong {
  color: #fff;
  background: #000;
  padding: 2px 8px;
  display: inline-block;
  margin: 0.2em 0;
}

.important-dates .date-message {
  padding: 0 20px 0 200px;
}

.important-dates .date-message h3, .important-dates .date-message .h3-heading {
  margin-top: 0.3em;
}

.important-dates-wrap .footer-message {
  text-align: center;
  padding: 2em;
}


/*
Has-* HMRC service

Deprecated: These styles are no longer in use and are awaiting removal

.has-self-assessment - found in prototypes only or in personal repos
.has-corporation     - found in prototypes only or in personal repos
.has-vat             - found in prototypes only or in personal repos
.has-paye            - found in prototypes only or in personal repos

body.self-assessment .has-self-assessment - not found
body.corporation .has-corporation         - not found
body.vat .has-vat                         - not found
body.paye .has-paye                       - not found
*/

.has-self-assessment,
.has-corporation,
.has-vat,
.has-paye {
  display: none;
}

body.self-assessment .has-self-assessment,
body.corporation .has-corporation,
body.vat .has-vat,
body.paye .has-paye {
  display: block;
}


/*
Main Nav

Deprecated: These styles are no longer in use and are awaiting removal

.main-nav                    - found in prototypes only or in personal repos
.main-nav .tab               - found in prototypes only or in personal repos
.main-nav .tab.selected      - found in prototypes only or in personal repos
.main-nav .messages          - found in prototypes only or in personal repos
.main-nav .messages.selected - found in prototypes only or in personal repos

.main-nav .messages.no-unread          - not found
.main-nav .messages.selected.no-unread - not found
.main-nav .count                       - not found
*/


.main-nav {
  border-bottom: 1px solid #ccc;
  margin: 2em 0;
}

.main-nav .tab {
  display: inline-block;
  padding: 12px 20px;
  font-size: 19px;
  position: relative;
}

.main-nav .tab.selected {
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 12px 19px 13px 19px;
  background: #fff;
  text-decoration: none;
  color: #000;
  margin-bottom: -1px;
}

.main-nav .messages,
.main-nav .messages.selected {
  padding-right: 40px;
}

.main-nav .messages.no-unread,
.main-nav .messages.selected.no-unread {
  padding-right: 19px;
}

.main-nav .count {
  position: absolute;
  background: $alert-bg-red;
  color: #fff;
  padding: 0.2em;
  font-size: 16px;
  text-decoration: none;
  top: 14px;
  right: 15px;
  line-height: 16px;
}


/*
Full Message

Deprecated: These styles are no longer in use and are awaiting removal

.full-message - found in prototypes only
*/

.full-message {
  width: 64%;
  float: left;
}

.full-message li {
  list-style: disc;
  margin-left: 1.5em;
}

.full-message .date-sent {
  font-size: 16px;
  color: #454a4c;
}


/*
Important Notice

Important notice styles. This is similar to the `notification` work.

Markup:
<div class="form-group">
  <p class="important-notice">
  An important notice for the user to read and take notice of.
  Please make sure you take the time to consume this important message.
  </p>
</div>

Styleguide Unknown.Important Notice
*/

.important-notice {
  padding-left: 2.5em;
  background: no-repeat left top url(../images/icons/icon-important.png);
  font-weight: 700;
}
{'fraction_non_alphanumeric': 0.12708626583551177, 'fraction_numerical': 0.02805147798109793, 'mean_word_length': 3.0733005733005734, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 29, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5504476', 'n_tokens_mistral': 3808, 'n_tokens_neox': 3478, 'n_words': 1049}