/* ---------------------------------------------------------------------------- */
/* Styles for ARTIKKELIT app                                                    */
/* ---------------------------------------------------------------------------- */



@import "/common/stylesheets/main.css";

/* ---------------------------------------------------------------------------- */

#artikkelit {
  background-color: var(--color-primary-white);
}



/* add space around all buttons in article form */
#articleForm button,
#articlePreview button {
  margin-bottom: 5px;
  margin-left: 5px;
}


/* ---------------------------------------------------------------------------- */

@media screen and (min-width: 1100px) {
  #artikkelit .article-form-and-preview {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .article-form-and-preview .col {
    width: 32vw;
    display: flex;
    flex-direction: column;
    padding: 0.5vw;
  }

  .article-form-and-preview>div:first-of-type {
    width: 64vw;
    display: flex;
    flex-direction: column;
    padding: 0.5vw;
  }
}

@media screen and (max-width: 1099px) {
  #artikkelit .article-form-and-preview {
    display: flex;
    flex-direction: column;
  }

  .article-form-and-preview .col {
    width: 99vw;
    display: flex;
    flex-direction: column;
    padding: 0.5vw;
  }
}

.col>* {
  padding: 8pt;
}

.main-header {
  display: flex;
  color: var(--color-blue-100);
  font-family: var(--font-family-headline);
  font-size: var(--font-size-headline-small);
  font-weight: var(--font-weight-headline);
  line-height: var(--font-line-height-headline-medium);
  text-transform: uppercase;
  align-items: center;
  padding-bottom: 20px;
}

.hidden {
  display: none;
}

#artikkelit form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

#artikkelit .header .material-icons {
  font-size: var(--font-size-icon-medium);
}

#artikkelit .header label {
  font-size: var(--font-size-label-medium);
  font-weight: var(--font-weight-label);
  line-height: var(--font-line-height-label-medium);
}

#artikkelit .half-width {
  width: 50%;
}

#artikkelit .full-width {
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
}

#artikkelit .full-width label {
  overflow: visible;
  white-space: nowrap;
}

#artikkelit .full-width select {
  width: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}

#artikkelit .full-width select option {
  overflow: hidden;
  text-overflow: ellipsis;
}

#artikkelit .full-width p {
  margin: 0px;
}

#artikkelit .full-width p:last-of-type {
  flex-grow: 1;
}

#artikkelit .capitalize {
  text-transform: capitalize;
}

#artikkelit fieldset {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  border-radius: 8px;
  border-color: var(--color-blue-100);
}

#artikkelit fieldset legend {
  color: var(--color-blue-100);
  font-size: var(--font-size-headline-small);
  font-weight: var(--font-weight-title);
}

#artikkelit fieldset .fieldset-sub-heading {
  color: var(--color-blue-100);
  font-family: var(--font-family-title);
  font-size: var(--font-size-headline-extra-small);
  font-weight: var(--font-weight-title);
  width: 100%;
  padding-top: 20px;
  padding-bottom: 10px;
}

#artikkelit fieldset .panel {
  width: 49%;
  align-items: center;
}

#artikkelit fieldset .panel>.full-width {
  display: flex;
}

#artikkelit fieldset .panel label {
  display: inline-flex;
  font-family: var(--font-family-label);
  text-align: end;
  margin-right: 10px;
  line-height: var(--font-line-height-label-medium);
  color: rgb(48, 93, 109);
}

#artikkelit fieldset .panel p {
  display: inline-flex;
  line-height: var(--font-line-height-content-medium);
}

.long-text {
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  flex-grow: 1;
}

.label-text {
  color: var(--color-blue-100);
  font-family: var(--font-family-label);
  font-size: var(--font-size-label-medium);
  font-weight: var(--font-weight-label);
}

#artikkelit label.label-text {
  margin-right: 8px;
}

#artikkelit label:after {
 content: ':';
}

.title-text {
  color: var(--color-blue-100);
  font-family: var(--font-family-title);
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-title);
}

.content-text {
  color: var(--color-primary-black);
  font-family: var(--font-family-content);
  font-size: var(--font-size-content-medium);
  font-weight: var(--font-weight-content);
}

.bold-text {
  font-weight: bold;
}

.justify-content-end {
  display: inline-flex;
  justify-content: end;
}

.justify-content-end>form {
  width: auto;
}

#artikkelin-osasto-toistuva-wrap,
#tieteenalat-list,
#metodologiat-list,
#tekija-organisaatiot-list,
#tekija-list,
#tiivistelmat-list,
#asiasana-list,
#huomautukset-list,
#udk-list,
#muu-luokitus-list,
#arvostelut-list {
  width: 100%;
}

.character-warning {
  background-color: var(--color-red-80);
}

#artikkelit input::-webkit-outer-spin-button,
#artikkelit input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

#artikkelit input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

#artikkelit Input,
#artikkelit Select {
  height: 30px;
}

#artikkelit .record-merge-panel .col .BoxShadow {
  min-height: 75px;
  display: flex;
  flex-direction: column;
}

#artikkelit .col>* {
  padding: 8pt;
}

#artikkelit .col .header {
  height: 40px;
  text-transform: uppercase;
  font-family: var(--font-family-headline);
  font-size: var(--font-size-headline-medium);
  font-weight: var(--font-weight-headline);
  line-height: var(--font-line-height-headline-medium);
  border-bottom: 1px solid var(--color-grey-60);
  align-items: center;
  display: flex;
}

#artikkelit .col .note {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-left: 8px;
  padding-right: 8px;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-list-small);
  line-height: var(--font-line-height-list-medium);
  font-weight: var(--font-weight-content);
  font-style: italic;
  color: var(--color-grey-100);
}

#artikkelit .col .note#articleFormNotes,
#artikkelit .col .note#articleRecordNotes {
  border-bottom: 1px solid var(--color-grey-60);
  margin-bottom: 5px;
  min-height: 16px;
}

#artikkelit .col .note#articleFormNotes {
  flex-direction: column;
  align-items: flex-start;
}

#artikkelit .note.record-valid {
  color: var(--color-primary-blue);
  font-style: normal;
}

#artikkelit .note.record-success {
  color: var(--color-functional-green);
  font-style: italic;
  font-weight: var(--font-weight-label);
}

#artikkelit .note.record-error {
  color: var(--color-functional-red);
  font-style: normal;
}

#artikkelit .col .note li {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-list-small);
  line-height: var(--font-line-height-list-medium);
  font-weight: var(--font-weight-content);
  margin-bottom: 5px;
}

#artikkelit .col .header .title {
  flex: 4;
}

#artikkelit .col .header .Select {
  flex: 1;
  visibility: hidden;
  display: flex;
  align-items: flex-end;
}

#artikkelit .article-actions {
  display: flex;
  flex-direction: row;
  padding-top: 20px;
  justify-content: center;
  gap: 20px;
}

#artikkelit .article-actions button {
  width: 170px;
}

#artikkelit .article-actions .action-check {
  display: flex;
}

#artikkelit .article-actions .action-forward {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-60);
}

#artikkelit .article-actions .action-forward .material-icons {
  font-size: 25px;
}

#artikkelit .article-actions .action-forward.proceed {
  color: var(--color-primary-blue);
}

#artikkelit #actionError button#formShowErrors.checkFailed span.material-icons:after {
  content: 'rule'
}

#artikkelit #actionError button#formShowErrors.checkPassed span.material-icons:after {
  content: 'checklist_rtl'
}

#artikkelit .article-actions .action-save {
  display: flex;
}

#artikkelit .header .material-icons {
  display: flex;
  padding: 8px;
  font-size: 24px;
  cursor: help;
}

#artikkelit .header label {
  font-size: var(--font-size-label-medium);
  font-weight: var(--font-weight-label);
  line-height: var(--font-line-height-label-medium);
}

#dialogForSave .dialog-supporting-text .accordion-heading-text {
  padding-right: 64px;
}

#dialogForSave .col {
  width: 1500px;
}

#dialogForSave .record-merge-panel {
  display: flex;
  flex-grow: 1;
  justify-content: center;
}

/* accordion default icon is  when accordion can be opened */
#dialogForSave .accordion .accordion-heading .accordion-heading-icon span:before {
  content: 'expand_more';
}

/* accordion icon is ^ when accordion can be closed */
#dialogForSave .accordion .accordion-heading.expanded .accordion-heading-icon span:before {
  content: 'expand_less';
}