/* BODY */
@media (min-width: 320px) {
  /* smartphones, iPhone, portrait 480x320 phones */

  body {
    height: 100%;
    margin: 0;
    background: var(--black);
  }
  #bodyContainer {
    height: 100%;
    display: flex;
    flex-flow: column;
  }
  header {
    box-sizing: border-box;
    padding: 0.5rem;
    background-color: var(--black);
    display: block;
    width: 100%;
    position: relative;
  }
  header .headerRow {
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: min-content 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
  }
  header .headerRow #headerLogo {
    display: block;
    text-align: left;
    grid-column: 1 / 1;
    grid-row: 1 / 1;
  }
  header .headerRow #headerLogo img {
    height: 40px;
  }
  header .headerRow #headerProductionTitle {
    position: relative;
    display: block;
    text-align: left;
    grid-column: 2 / 2;
    grid-row: 1 / 1;
  }
  header .headerRow #headerProductionTitle h1 {
    color: var(--white);
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 10px;
  }
  header .headerRow #headerProductionTitle h1 svg {
    width: 100%;
    max-width: 1.2rem;
    color: var(--primary);
    transition: all 0.5s cubic-bezier(0.17, 0.67, 0.41, 0.95);
  }
  header .headerRow #headerProductionTitle h1.active svg {
    transform: rotate(180deg);
    transition: all 0.5s cubic-bezier(0.17, 0.67, 0.41, 0.95);
  }

  /* TODO: dropdown select of production */
  header .headerRow #headerProductionTitle h1:hover {
    background: var(--secondaryVariation);
    transform: scale(0.96);
    transition: all 0.3s ease;
  }
  header .headerRow #headerProductionTitle h1.active {
    background: var(--secondaryLight);
  }
  header .headerRow #headerProductionTitle h1.active:hover {
    transform: none;
  }
  header .headerRow #user_loginContainer {
    display: flex;
    text-align: right;
    grid-column: 1 / span 2;
    grid-row: 2 / 2;
    justify-self: end;
    justify-items: end;
    align-items: center;
  }

  /* --- SELECT PRODUCTION --- */

  #selectActiveProductionHolder {
    position: absolute;
    z-index: 50;
    left: 0px;
    max-height: 0;
    box-sizing: border-box;
    background: var(--secondaryLight);
    border-radius: 1rem;
    visibility: hidden;
    overflow: hidden;
  }
  #selectActiveProductionHolder .productionOption:hover {
    background: var(--secondary);
    transition: all 0.3s ease;
  }
  #selectActiveProductionHolder .productionOption {
    color: var(--od);
    font-size: 14px;
    font-weight: 500;
    padding: 0.8rem 2rem;
    border-top: 1px solid var(--secondary);
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    transition: all 0.3s ease;
  }
  #selectActiveProductionHolder .productionOption span {
    font-size: 0.7rem;
    font-family: var(--font-heading);
    font-weight: 400;
    display: block;
    line-height: 1.3;
  }
  #selectActiveProductionHolder .productionOption.active {
    color: var(--primary);
  }

  #contentHolder {
    flex: 1 1 auto;
  }

  #contentMain {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background: var(--white);
    padding: 2rem 1rem 1.5rem 2rem;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
  }

  /* PRODUCTION */

  #production_list .production_item.completed {
    background-color: var(--tertiarylighter);
  }

  button.unarchive {
    background: none;
    border: none;
    margin: 0;
    padding: 0 15px 0 0;
  }
  button.unarchive img {
    width: 20px;
    -webkit-filter: brightness(0.4); /* Safari 6.0 - 9.0 */
    filter: brightness(0.4); /* Standard syntax */
  }
  button.unarchive:hover img {
    -webkit-filter: brightness(0.8); /* Safari 6.0 - 9.0 */
    filter: brightness(0.8); /* Standard syntax */
  }

  #yourproductions tr.archived {
    color: var(--gray);
    font-style: italic;
  }
  #yourproductions tr.complete:not(.active) {
    color: var(--primary);
  }
  #yourproductions tr.active {
    background-color: var(--primary);
  }
  #yourproductions tr:not(.active, .archived) {
    cursor: pointer;
  }

  /* ----- BUTTONS ----- */
  #contentMain button,
  #contentMain input[type="submit"],
  #contentMain input[type="button"] {
    background: var(--primary);
    color: var(--secondary);
    padding: 0.5rem 1.2rem;
    margin: 0;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--font-heading);
    border: none;
    border-radius: 2rem;
    transition: all 0.2s cubic-bezier(0.17, 0.67, 0.73, 0.95);
    font-weight: 500;
  }
  div[aria-describedby="confirmationBox"] button,
  div[aria-describedby="confirmationBox"] button:hover:not([title="Close"]),
  div[aria-describedby="confirmationBox"] button:focus:not([title="Close"]) {
    background: var(--primary);
    color: var(--secondary);
    padding: 0.5rem 1.2rem;
    margin: 0.5rem !important;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--font-heading);
    border: none;
    border-radius: 2rem;
    transition: all 0.2s cubic-bezier(0.17, 0.67, 0.73, 0.95);
    font-weight: 500;
  }
  #contentMain button:hover,
  #contentMain input[type="submit"]:hover,
  #contentMain input[type="button"]:hover,
  div[aria-describedby="confirmationBox"] button:hover {
    transform: scale(0.96);
    transition: all 0.2s cubic-bezier(0.17, 0.67, 0.73, 0.95);
  }
  

  #contentMain button:hover > span {
    background: none;
  }
  #contentMain button:disabled,
  #contentMain input[type="submit"]:disabled,
  #contentMain input[type="button"]:disabled,
  div[aria-describedby="confirmationBox"] button:disabled {
    opacity: 0.5;
    background: var(--modgray);
    color: var(--black);
    cursor: auto;
  }
  #contentMain button:disabled:hover,
  #contentMain input[type="submit"]:disabled:hover,
  #contentMain input[type="button"]:disabled:hover,
  div[aria-describedby="confirmationBox"] button:disabled:hover {
    transform: none;
  }
  #contentMain button.delete {
    background-color: var(--alertSecondaryLighter);
    border-radius: 0.5rem;
    padding: 0.5rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #contentMain button.editable,
  #contentMain button.unarchive {
    background-color: var(--editable);
    border-radius: 0.5rem;
    padding: 0.5rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #contentMain button.calc_icon {
    background-color: transparent;
    border-radius: 0.5rem;
    border: 1px solid var(--primary);
    padding: 0.5rem 0.5rem;
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
  }
  #contentMain button.calc_icon.selected {
    background-color: var(--secondaryLight);
    border-color: var(--secondaryLight);
    color: var(--white);
  }
  #contentMain button.seriousButton {
    background-color: var(--alertSecondaryLighter);
    color: var(--white);
    font-weight: 500;
  }


  /* ----- BODY LAYOUT ----- */

  .contentMain-base {
    width: 100%;
    display: grid;
    justify-items: stretch;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .contentMain-uniCol {
    grid-template-columns: 1fr;
  }
  .contentMain-biCol {
    grid-template-columns: 1fr 1fr;
  }
  .contentMain-triCol {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .contentMain-rightCol {
    grid-template-columns: 3fr 1fr;
  }
  .contentMain-rightColAuto {
    grid-template-columns: 1fr auto;
  }
  .contentMain-rightCol-third {
    grid-template-columns: 2fr 1fr;
  }
  .contentMain-LeftCol-third {
    grid-template-columns: 1fr 2fr;
  }
  .contentMain-LeftCol {
    grid-template-columns: 1fr 3fr;
  }
  .contentMain-RightCol-halflarge {
    grid-template-columns: 1fr 1.5fr;
  }
  .contentMain-col {
    position: relative;
    width: 100%;
    border-radius: 1rem;
    padding: 1rem;
    background: transparent;
    border: 1px solid var(--modgray);
  }
  .contentMain-col-fullBiCol {
    grid-column: 1 / span 2;
  }
  .contentMain-col-reverse {
    background: none;
    padding: 0;
    border: none;
  }
  .contentMain-col-alignBaseline {
    align-self: baseline;
  }
  .borderBottom {
    border-bottom: 1px solid var(--secondary);
  }
  .greenRow,
  .greenBackground {
    background: var(--primary);
    border: none;
  }

  /* ----- BODY LAYOUT ENDS ----- */
  span[data-style="bgcolor"] {
    background-color: var(--element-color);
    border-radius: 3px;
    display: inline-flex;
    padding: 2px 5px;
  }
  span.circle-tag[data-style="bgcolor"] {
    position: relative;
    background: none;
    padding: auto 1rem auto 1rem;
    padding-left: 1rem;
    margin-left:0.5rem;
  }
  span.circle-tag[data-style="bgcolor"]:before {
    content: "";
    background-color: var(--element-color);
    border-radius: 100%;
    left: -0.5rem;
    width: 1rem;
    height: 1rem;
    position: absolute;
  }

  /* ----- HEADSPLIT FOR H2 HEADINGS OF MAIN COLS ----- */

  .headSplit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
  }
  .headSplit_left {
  }
  .headSplit_left h2 {
    margin: 0;
  }
  .headSplit_right {
    display: flex;
    align-items: center;
    text-align: right;
  }

  /* ----- Record (Datatables & Non) Actions ----- */

  button.delete img,
  button.editable img {
    width: 18px;
  }
  tr.editDisabled button.delete img,
  tr.editDisabled button.delete img:hover {
    display: none;
  }

  /* ----- Record Design (non-datatables) ----- */

  .data_row {
    padding: 10px;
    display: grid;
    grid-template-columns: 220px 1.5fr repeat(3, min-content);
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid var(--lightgray);
  }
  .customisation_detail.data_row {
    grid-template-columns: 380px 1.5fr repeat(3, min-content);
  } 

  .data_row:nth-of-type(1) {
    border-top: 1px solid var(--lightgray);
  }
  .data_row div {
    min-width:0;
    overflow-wrap: break-word;
  }
  .data_row .data_heading {
    font-weight: bold;
    text-align: left;
  }
  .editingActive [data-editable="1"] {
    height: 100%;
    width: 100%;
    border: 1px dashed var(--editable);
    background: var(--editableBackground);
    border-radius: 3px;
  }

  /* Input radio and checkbox */
  .data_row.currentedit input[type="radio"], 
  .data_row.currentedit input[type="checkbox"],
  input[type="radio"].niceCheckboxes,
  input[type="checkbox"].niceCheckboxes {
    visibility: hidden;
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .data_row.currentedit input[type="radio"]:checked + label,
  .data_row.currentedit input[type="checkbox"]:checked + label,
  input[type="radio"].niceCheckboxes:checked + label,
  input[type="checkbox"].niceCheckboxes:checked + label {
    background-color: var(--secondaryLight);
    border-color: var(--secondaryLight);
    color: var(--white);
  }
  .data_row.currentedit input[type="radio"] + label,
  .data_row.currentedit input[type="checkbox"] + label,
  input[type="radio"].niceCheckboxes + label,
  input[type="checkbox"].niceCheckboxes + label {
    font-family: var(--font-heading);
    color: var(--secondary);
    background-color: transparent;
    border-radius: 0.5rem;
    border: 1px solid var(--primary);
    padding: 0.375rem 0.375rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-transform: capitalize;
    display: inline-block;
    margin-right: 0.375rem;
    margin-bottom: 0.5rem; /* Add vertical padding */
    transition: all 0.2s cubic-bezier(0.17, 0.67, 0.73, 0.95);
  }
  .data_row.currentedit input[type="radio"] + label:hover,
  .data_row.currentedit input[type="checkbox"] + label:hover,
  input[type="checkbox"].niceCheckboxes + label:hover,
  input[type="checkbox"].niceCheckboxes + label:hover {
    transform: scale(0.96);
    transition: all 0.2s cubic-bezier(0.17, 0.67, 0.73, 0.95);
  }
  .data_row .inputCharCount,
  .data_row .smallFontSize {
    font-size:0.6rem;
  }
  .data_row .inputCharCount.overCount {
    color:var(--alert);  
  }

  /* ----- AVATAR LAYOUTS ----- */

  .nameAndAvatar {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 5px;
    align-items: center;
    justify-content: stretch;
  }
  .nameAndAvatar .avatar {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    overflow: hidden;
  }
  .nameAndAvatar .avatar img {
    height: 100%;
  }
  .nameAndAvatar .name {
  }

  /* ----- FORM LAYOUTS ----- */

  /* horizontal layout */
  .odinForm-style-horizontal.odinForm-form {
  }
  .odinForm-style-horizontal .odinForm-row {
    align-items: start;
    justify-items: stretch;
    padding: 10px 0;
  }
  .odinForm-style-horizontal .odinForm-label {
    font-weight: bold;
    padding-bottom: 3px;
  }
  .odinForm-style-horizontal .odinForm-note {
    font-style: italic;
    font-size: 10px;
  }
  .odinForm-style-horizontal .odinForm-input,
  .odinForm-style-horizontal .odinForm-select {
  }
  .odinForm-style-horizontal .odinForm-input input[type="text"] {
    width: 100%;
  }
  .odinForm-style-horizontal .odinForm-row:has(input[type="submit"]) {
    text-align: right;
  }
  .odinForm-style-horizontal .odinForm-rcOptions {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: minmax(30px, 50px) 1fr;
    padding: 10px 0 0 0;
  }
  .odinForm-style-horizontal .odinForm-rcInput {
    grid-column: 1;
  }
  .odinForm-style-horizontal .odinForm-rcLabel {
    grid-column: 2;
  }

  /* Form Share Forms - (new production + new learning) */
  #form-share .odinForm-form {
    max-width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  #form-share .odinForm-form .odinForm-row[data-name="submit"] {
    grid-column: span 2;
    text-align: left;
  }

  /* ---- UPLOAD BOX ---- */

  #dropzone {
    border-radius: 1rem;
    padding: 2rem;
    border: 2px dashed var(--primarydarker);
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    color: var(--primarydarker);
    font-weight: 500;
    font-family: var(--font-heading);
    margin-bottom: 1rem;
  }

  /* ---- Accordian ---- */

  .ui-accordion {
    font-family: var(--font-body);
  }
  .ui-accordion .ui-accordion-content {
    background: none;
    border: none;
    padding: 1rem;
  }
  .ui-accordion .ui-accordion-header,
  .ui-accordion .ui-accordion-header .ui-state-active {
    font-size: 1rem;
    font-weight: 400;
    color: var(--ol);
    border: none;
    border-top: 1px solid var(--modgray);
    background: transparent;
    padding: 1rem;
    border-radius: unset;
  }
  .ui-accordion .ui-accordion-header:hover {
    background: var(--tertiarylighter);
  }
  .ui-accordion .ui-icon {
    background: none;
    width: 0;
    height: 0;
    border-top: 0.35rem solid transparent;
    border-bottom: 0.35rem solid transparent;
    border-left: 0.35rem solid var(--ol);
    transition: all 0.2s cubic-bezier(0.17, 0.67, 0.73, 0.95);
    margin-right: 0.4rem;
  }
  .ui-accordion .ui-accordion-header:hover .ui-icon {
    border-left: 0.35rem solid var(--primarydarker);
  }
  .ui-accordion .ui-state-active .ui-icon {
    transform: rotate(90deg);
    transform-origin: center center;
    transition: all 0.2s cubic-bezier(0.17, 0.67, 0.73, 0.95);
  }

  /* PAGE TITLE */

  .pageTitle {
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .pageTitle .pageTitleContainer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .pageTitle .pageTitleContainer svg {
    width: 100%;
    max-width: 1.8rem;
    color: var(--primarydarker);
  }
  .pageIntroduction {
    border-left-color:var(--dark);
    border-left-width:10px;
  }

  /* GENERAL */

  .importantNotification {
    border-left-color:var(--alertSecondaryLighter);
    border-left-width:10px;
    border-color: var(--alertSecondaryLighter);
  }

  .portalUpdate {}

  .possibleComplete {
    /* border-color: var(--alertSecondaryLighter); */
  }

}