/* User input section */

#userInputDiv {
  display: flex;
}

.sectionTitle {
  display: flex;
  margin: 0.8rem 0 0 0;
  text-indent: 1.5rem;
}

.betweenMarkers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.disabledSwitch {
  cursor: not-allowed;
}

/* Output Section */

.selectionOutputSection {
  display: block;
}

.eachSectionDiv {
  display: flex;
  border: 1px solid light-dark(var(--color6), var(--color1));
  justify-content: space-evenly;
}
.pairStitchesDiv {
  display: block;
}

.pairStitchesDiv p {
  display: block;
}

.sectionTitle h3 {
  padding: 0.2rem;
  padding-right: 1.5rem;
  border-radius: 0.5rem;
  color: light-dark(var(--color6), var(--color1));
  background-color: #f2d49c; /* default*/
}

.colorCoding h4 {
  font-size: 1.2rem;
  font-variant: small-caps;
}

.pairNumber {
  display: flex;
  justify-content: center;
  font-size: 1rem;
  font-variant: small-caps;
}

.pairNumber h3 {
  margin: 0.2rem;
}

.leftANDright {
  display: flex;
  flex-direction: row-reverse;
  width: fit-content;
}

.pairRight,
.pairLeft {
  display: flex;
  flex-direction: column;
  border: 1px solid light-dark(var(--color6), var(--color1));
  margin: 0 0.1rem;
}

.pairTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 2rem;
  margin: 0;
}

.setUpRow1paragraph span {
  line-height: 1.3;
}

#setUpRows {
  background-color: light-dark(var(--color6), var(--color1));
  padding: 0 0.5rem;
  margin: 0 5px;
  max-width: 95vw;
  display: block;
  border-radius: 0.5rem;
}

/* COLOR CODING */

.colorCoding {
  border-radius: 0.5rem;
  margin: 0.2rem;
  background-color: #f2d49c30; /* default*/
}

.colorCoding0 h3,
.colorCoding7 h3 {
  background-color: #a8064c; /* pink */
  color: #fff;
}
.colorCoding1 h3,
.colorCoding8 h3 {
  background-color: #0000ff; /* blue */
  color: #fff;
}
.colorCoding2 h3,
.colorCoding9 h3 {
  background-color: #e09407; /* orange*/
  color: #000;
}
.colorCoding3 h3,
.colorCoding10 h3 {
  background-color: #800080; /* purple */
  color: #fff;
}
.colorCoding4 h3,
.colorCoding11 h3 {
  background-color: #0d6769; /* turquesa */
  color: #fff;
}
.colorCoding5 h3,
.colorCoding12 h3 {
  background-color: #ce0000; /* red */
  color: #fff;
}
.colorCoding6 h3,
.colorCoding13 h3 {
  background-color: #494f54; /* gray */
  color: #fff;
}

.colorCoding0,
.colorCoding7 {
  background-color: #ff006e30; /* pink */
  color: #fff;
}
.colorCoding1,
.colorCoding8 {
  background-color: #0000ff30; /* blue */
  color: #fff;
}
.colorCoding2,
.colorCoding9 {
  background-color: #ee9b0030; /* orange*/
  color: #fff;
}
.colorCoding3,
.colorCoding10 {
  background-color: #80008030; /* purple */
  color: #fff;
}
.colorCoding4,
.colorCoding11 {
  background-color: #0a939630; /* turquesa */
  color: #fff;
}
.colorCoding5,
.colorCoding12 {
  background-color: #ce000030; /* red */
  color: #fff;
}
.colorCoding6,
.colorCoding13 {
  background-color: #6c757d30; /* gray */
  color: #fff;
}

.individualPlacemats {
  width: 40vw;
  height: auto;
}

#placematA {
  grid-area: A;
}
#placematB {
  grid-area: B;
}
#placematC {
  grid-area: C;
}
#placematD {
  grid-area: D;
}
#allPlacematsText {
  grid-area: E;
}

.allPlacemats {
  height: 100%;
  display: grid;
  grid-template-areas:
    "A B"
    "C D"
    "E E";
  gap: 10px;
  justify-items: center;
}

#SVGnumbers {
  min-height: 18px;
}

.outOfSync {
  position: absolute;
  top: 10%;
  width: 100%;
  text-align: center;
  display: block;
  background-color: #5f5fa5b1;
  color: #000;
  min-height: 50px;
  border-radius: 10px;
  background-image: linear-gradient(90deg, #ffffff58, #5f5fa583, #ffffff58);
}

.outOfSync p {
  font-size: 1.5rem;
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
  text-shadow:
    0 0 3px light-dark(var(--color5), #000),
    0 0 5px light-dark(var(--color5), #000);
  color: light-dark(var(--color1), var(--color5));
  font-weight: bold;
}

input[type="number"],
#numOftotalDE {
  border: 2px solid light-dark(var(--color3), var(--color3));
  border-radius: 4px;
  background-color: light-dark(var(--color6), var(--color1));
  height: 25px;
  width: 25vw;
  padding: 5px;
}

.YCselection {
  font-size: 0.8rem;
  margin: 0;
}

/* COMPONENTS */

.switchBtnDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 0 0.2rem;
  height: 2rem;
}

/* SWITCH */

.switch {
  position: relative;
  display: inline-block;
  width: 3em;
  height: 1.5em;
  margin: 0 0.5em 0 0.5em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: light-dark(var(--color6), var(--color1));
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1em;
  width: 1em;
  left: 0.25em;
  bottom: 0.25em;
  background-color: light-dark(var(--color5), #000); /* 7 -> 5*/
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider,
.CCselected + .slider {
  background-color: light-dark(var(--color3), var(--color3));
}

input:checked + .slider:before,
.CCselected + .slider:before {
  -ms-transform: translateX(1.5em);
  transform: translateX(1.8em);
}

.slider.round {
  border-radius: 2em;
}

.slider.round:before {
  border-radius: 50%;
}

input:focus + .slider {
  box-shadow: 0 0 1px light-dark(var(--color3), var(--color3));
}

.outsideBtnsDiv {
  display: flex;
  justify-content: center;
}

.buttonsDiv {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

fieldset {
  text-align: center;
  border-color: light-dark(var(--color4), var(--color2));
  border-style: dotted;
  padding: 0.1rem;
  margin: 0.1rem;
}

/* MEDIA QUERIES */

@media screen and (max-width: 500px) {
  /* Smartphone */
  .buttonsDiv {
    justify-content: center;
  }
  .outOfSync p {
    font-size: 1rem;
    height: min-content;
    margin: 0;
    padding: 0;
  }
  #userInputDiv {
    flex-direction: column;
    margin: 0 1rem;
  }
  .selectionOutputSection {
    display: block;
  }
  .selectionOutputSection h4,
  .selectionOutputSection h3 {
    padding: 0.5rem 0 0.2rem 0;
    text-indent: 1rem;
  }
  .eachSectionDiv {
    display: block;
    padding: 0.5rem;
  }
  .pairStitchesDiv {
    display: block;
  }
  .pairStitchesDiv p {
    display: block;
  }

  #SVGnumbers text {
    font-size: 0.6rem;
  }
}

@media screen and (min-width: 501px) and (max-width: 775px) {
  /* small Tablet */
  #userInputDiv {
    flex-wrap: wrap;
  }
  .betweenMarkers {
    flex-wrap: wrap;
  }
  .selectionOutputSection {
    display: block;
    padding: 0.25rem;
  }

  .eachSectionDiv {
    display: flex;
    flex-wrap: wrap;
  }

  .eachPairDiv {
    margin: 0.25rem;
    min-width: max-content;
  }

  .pairStitchesDiv {
    display: block;
  }

  .pairStitchesDiv p {
    display: block;
  }

  #SVGnumbers text {
    font-size: 0.85rem;
  }
}

@media screen and (min-width: 776px) and (max-width: 976px) {
  /* BIG Tablet */
  #userInputDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .selectionOutputSection {
    display: block;
    margin: 0.5rem 0 0.2rem 0;
  }
  .eachSectionDiv {
    display: flex;
    flex-wrap: wrap;
  }
  .eachPairDiv {
    margin: 0.2rem;
    min-width: max-content;
  }

  .pairStitchesDiv {
    display: block;
    font-size: 0.8rem;
  }

  .pairStitchesDiv p {
    font-size: 1rem;
  }
  .pairStitchesDiv p {
    display: block;
  }
}

@media screen and (min-width: 977px) and (max-width: 1028px) {
  /* Desktop */
  #userInputDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .selectionOutputSection {
    display: block;
  }
  .eachSectionDiv {
    display: flex;
    flex-wrap: wrap;
    border-style: none;
  }

  .selectionOutputSection h3 {
    margin: 0.6rem 0 0.2rem 0;
    text-indent: 1.5rem;
  }
  .eachPairDiv {
    border: 1px solid light-dark(var(--color6), var(--color1));
    margin: 0.15rem;
    padding: 0.25rem;
    min-width: max-content;
  }
  .pairStitchesDiv {
    display: block;
    font-size: 0.8rem;
  }
}

@media screen and (min-width: 1029px) and (max-width: 1800px) {
  /* Big screen */

  #userInputDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .selectionOutputSection h3 {
    font-size: 1.5rem;
    text-indent: 2rem;
  }

  .YCselection {
    font-size: 1rem;
  }

  .selectionOutputSection {
    display: block;
  }
  .selectionOutputSection h3,
  .selectionOutputSection h4 {
    margin: 1rem 0 0.5rem 0;
  }
  .eachSectionDiv {
    display: flex;
    flex-wrap: wrap;
  }
  .eachPairDiv {
    margin: 0.15rem;
    padding: 0.25rem;
    min-width: max-content;
  }
  .pairStitchesDiv {
    display: block;
    font-size: 0.8rem;
  }
  .buttonsDiv {
    max-width: max-content;
  }
  #SVGnumbers text {
    font-size: 1.2rem;
    font-weight: bold;
  }
}

@media screen and (max-device-width: 650px) {
  #placematA,
  #placematC {
    justify-self: flex-end;
  }
  #placematB,
  #placematD {
    justify-self: flex-start;
  }
  #bottomBoxS {
    max-height: 15px;
  }

  .allPlacemats {
    grid-template-areas:
      "A B C D"
      "E E E E";
    gap: 10px;
    justify-items: center;
    padding: 0 1.5rem;
  }
  .individualPlacemats {
    width: 22vw;
    height: auto;
  }
}