/* ==============================================================================================
   TEXTCORRECTION CSS: CSS for the new text correction pages (weren't in Rails app)
   ============================================================================================== */

/* ---- 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;
}


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

div#articletextcorrectionpopup
{
  background: #eee !important;
  height: 90% !important;
  max-height: 90% !important;
  max-width: 90% !important;
  padding: 1rem;
  position: relative;
  width: 90% !important;
}

div#articletextcorrectionpopup div#imagescell, div#articletextcorrectionpopup div#inputscell
{
  width: 50%;
}

div#articletextcorrectionpopup div.imagecontainer
{
  margin-top: 0;
}

div#articletextcorrectionpopup div.inputarticlecccontainer
{
  padding-top: 0.5rem;
}

div#articletextcorrectionpopup input[type="checkbox"]
{
  display: initial;
  margin-right: 5px;
}

div#articletextcorrectionpopup input[type="text"]
{
  border: 0px;
  margin: 0 !important;
  padding: 0 0.75rem !important;
}

div#articletextcorrectionpopup input[type="text"].changedline, div#articletextcorrectionpopup input[type="text"].changedlinesaved
{
  border: solid 1px green;
}

div#articletextcorrectionpopupcontrols
{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

div#articletextcorrectionpopupcontrols > *:not(:last-child)
{
  margin-right: 3px;
}

div#articletextcorrectionpopupcontrols button
{
  border-radius: 3px;
}

div#articletextcorrectionpopuphelptooltip div
{
  font-family: MuliBold;
}

div#articletextcorrectionpopuphelptooltip ul
{
  margin-left: 1rem;  /* To save some horizontal space */
}

/* We want this to be sized like a button, but not look like a button */
span#articletextcorrectionpopuphelptooltipspan
{
  background-color: transparent;
  border-bottom: none;
  color: inherit !important;
}

/* On medium screens the popup covers almost all of the screen, and has less margin/padding in a couple of places */
@media screen and (min-width: 40em) and (max-width: 63.9375em)
{
  div#articletextcorrectionpopup
  {
    height: 95% !important;
    max-height: 95% !important;
    max-width: 95% !important;
    padding: 0.5rem;
    width: 95% !important;
  }

  div#articletextcorrectionpopupcontrols button
  {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }
}

/* On small screens the popup covers the entire screen, and has even less margin/padding in a couple of places */
@media screen and (max-width: 39.9375em)
{
  div#articletextcorrectionpopup
  {
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    padding: 5px;
    width: 100% !important;
  }

  div#articletextcorrectionpopupcontrols button
  {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
  }
}

div.completelycorrectstats > div > div
{
  padding: 3px;
}
div.completelycorrectstats > div > div.completelycorrectstatsentryvalue
{
  padding-left: 15px;
  text-align: right;
}
div.completelycorrectstats > div > div.completelycorrectstatsentrypercentage
{
  padding-left: 15px;
}

/* To stop the text status message changing in height when the link/button versions are switched */
div#textstatuscontrolcontainer
{
  min-height: 2.625rem;
}

div.textstatusmessage
{
  border-bottom: solid 1px black;
  padding: 1rem;
  text-align: left;
}

div.textstatusmessage .button
{
  margin-bottom: 0;
}

div.textstatusmessage .disabled-button
{
  background-color: #888;
  cursor: not-allowed;
}

div#thankyoumessagecontainer
{
  background-color: #ddffe0;  /* Newspapers theme colour, lightened by 70% */
  border: solid 1px #2a562d;  /* Newspapers theme colour */
  margin-top: 1rem;
  padding: 1rem;
}

div#thankyoumessagecontainer a
{
  border-bottom: solid 1px #2a562d;  /* Newspapers theme colour */
}

/* Matches "My text corrections" header on Account page */
h1.latesttextcorrectionsheader
{
  font-family: PlayfairDisplayBold !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  line-height: 120% !important;
  margin-top: 1.5rem !important;
  margin-bottom: .75rem !important;
  padding: 0 !important;
}