/* ==============================================================================================
   USERACCOUNTS CSS: CSS for the login / user accounts stuff (wasn't in Rails app)
   ============================================================================================== */

/* ---- General classes that can be applied to any element ---- */

.hiddeninitially
{
  display: none;  /* Initial state, made visible when necessary */
}

.semitransparent
{
  -moz-opacity: 0.5;
  opacity: 0.5;
}

.transparent
{
  -moz-opacity: 0.0 !important;
  opacity: 0.0 !important;
}


/* ---- Special "divtable" classes -- here so they can be overridden at any point below ---- */

div.divtable
{
  display: table;
}

div.divtable > div
{
  display: table-row;
}

div.divtable > div > div
{
  display: table-cell;
  vertical-align: top;  /* Override default "baseline" value, which works weirdly */
}


/* ---- application-X.css overrides ---- */

/* Maryam doesn't like the small caps or the grey colour, and wants more space above */
.content.article h3.article-title small
{
  color: #222;
  margin-top: 1rem;
  text-transform: none;
}


/* ---- Foundation overrides ---- */

/* Change the label colour and size on the "new user details" modal */
.reveal label
{
  color: inherit !important;  /* To get the normal off-black */
  font-size: 1rem;
}

/* This affects ALL tooltips but currently there's just the one for the text correction popup help */
.tooltip
{
  max-width: 20rem;
}


/* ---- RealMe styling ---- */

.realme_button, .realme_button:hover
{
  background-color: #D64309;  /* RealMe Web Tangerine */
  border: solid 1px #D64309 !important;  /* RealMe Web Tangerine */
  border-radius: 0.8rem;
  color: white !important;
  font-weight: bold;
  margin-bottom: 0;
  min-width: 12rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
}

.realme_button_container
{
  text-align: center;
}

.realme_button_logo
{
  margin-right: 0.75rem;
}

/* Mostly copied from the old realme.css file, with realme_primary_login stuff included */
.realme_widget
{
  border: solid 1px #D64309;  /* RealMe Web Tangerine */
  font-family: sans-serif;
  color: inherit;
  font-size: 13px;
  /* Set font-size explicitly to avoid cascade from the page. */
  line-height: 1.53846;
  /* Reset the line-height to something senisble inside the widget */
  max-width: 28em;
  min-width: 16.30769em;
  padding: 1.38462em;
}
/* Needs to be quite specific to override h2 settings from further down */
body .realme_widget h2.realme_title
{
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.230769231em;
  font-family: sans-serif;  /* So the normal PP font isn't used */
  font-weight: bold;
}
.realme_widget p
{
  margin-top: 0.5em;
}


/* ---- Specific classes ---- */

a.hidearticletextcorrectionextralines, a.showarticletextcorrectionextralines
{
  padding: 0.5rem;
}

/* Used in the user account page */
div.articletextcorrectionheader
{
  border-top: solid 1px #606060;
  margin-top: 1rem;
  padding-top: 1rem;
  padding-bottom: 0.25rem;
}

div.articletextcorrectionheader span.action
{
  color: #606060;
  margin-left: 0.5rem;
}

div.articletextcorrectionheader span.timestamp
{
  color: #606060;
  font-family: MuliBold;
}

/* These are still used even though we group history entries into articles */
div.blocktextcorrectionline
{
  width: 100%;  /* Expand divtable */
}
div.blocktextcorrectionline > div > div
{
  width: 50%;  /* 1/2 */
}

button.deactivateuserbutton, button.deleteuserbutton
{
  margin: 0;
}

div.edituserdetailsformsuccess
{
  background-color: #ddffe0;  /* Newspapers theme colour, lightened by 70% */
  color: #2a562d;  /* Newspapers theme colour */
  margin-bottom: 0.75rem;
  padding: 0.5rem;
}

div.loading-spinner
{
  z-index: 10000;  /* Higher than popups etc */
}
.default div.loading-spinner
{
  color: black;
}

div#loginrequiredcontenttext
{
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}
div#loginrequiredcontenttext p
{
  margin-bottom: 0.5rem;
}

/* Suppress bottom margin (added to all buttons by Foundation) on "close popup" buttons */
div.popupcontent input.popupclosebutton
{
  margin-bottom: 0px;
}

div.popupheader
{
  display: flex;
  justify-content: space-between;
}

div.popupheader button.popupheaderclosebutton
{
  background: transparent;
  border: 0;
  font-size: 2em;
  line-height: 1;
  padding: 0;
  position: initial !important;
}

div.popupscrollablecontentwrapper
{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: hidden;
}

div.popupscrollablecontentwrapper div.popupcontent
{
  overflow-y: auto;
}

div.useraccountpageheader
{
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

div.useraccountpageheader a.logout-link
{
  color: #FEFEFE;
  margin-bottom: 0;
}

div.useraccountpagecontent
{
  background-color: #F0F0F0;
  padding: 1rem;
}

div.useraccountpagetabarea
{
  margin-bottom: 1rem;
}

div.useraccountpagetabarea h3
{
  margin-bottom: 1.25rem;
}

div#useradminformscontainer
{
  margin-top: 1.5rem;
}

div.userscoreboard
{
  margin-bottom: 2rem;
  min-width: 125px;
}

div.userscoreboard > div > div
{
  padding: 3px;
}

div.userscoreboard > div > div.userscoreboardentrypos
{
  text-align: right;
}

div.userscoreboard > div > div.userscoreboardentryname
{
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
}

div.userscoreboard > div > div.userscoreboardentryvalue
{
  padding-left: 1rem;
  text-align: right;
}

div.userscoreboard > div.userscoreboardentryforcurrentuser > div
{
  font-family: MuliBold;
  font-weight: bold;
}

form#edituserdetailsform label, form#mfaform label, form#newuserdetailsform label, form#useradminfilterform label
{
  color: black !important;  /* Shouldn't look like a link */
  font-size: 1rem;  /* Standard size */
}

p.textcorrectionstatssummary b
{
  font-family: MuliBold;
}

/* For "minimum edit" deletions and insertions */
span.meddel
{
  background-color: #FFB800;  /* Provided by Jason May 30 2023 */
  font-family: MuliBold;
}
span.medins
{
  background-color: #9BCFFF;  /* Provided by Jason May 30 2023 */
  font-family: MuliBold;
}

table.useradmintable td.regconfdate
{
  white-space: nowrap;  /* So the day/month/year don't get split over multiple lines */
}

table.useradmintable td.textcorrections
{
  text-align: right;
}