/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!../../node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!../../node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/firewall/lib/components/PuzzleDisplay.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Input colors */
/* Font sizes */
.PuzzleDisplay_puzzleDisplay__O33Hq {
  text-align: center;
  max-width: 90%;
  width: 100%;
  margin: 0 auto;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.5333333333);
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
.PuzzleDisplay_puzzleDisplay__O33Hq h2 {
  color: orange;
}

.PuzzleDisplay_game__4iDmE {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 4px;
}
.PuzzleDisplay_game__4iDmE h3 {
  text-transform: uppercase;
  font-family: "Source Code Pro", monospace;
  width: 100%;
  color: #888;
  text-align: left;
  border-bottom: 3px solid rgba(0, 0, 0, 0.4666666667);
  margin-bottom: 8px !important;
}

.PuzzleDisplay_codePad__cbkv4 {
  display: grid;
  grid-row-gap: 8px;
  row-gap: 8px;
}

.PuzzleDisplay_gridItem__nkcyk,
.PuzzleDisplay_gridItemEmpty__OFs1g {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.6666666667);
  transition: background-color 0.2s ease;
}

.PuzzleDisplay_gridItem__nkcyk:hover {
  background-color: #1a1a1a;
}

.PuzzleDisplay_gridItemEmpty__OFs1g {
  opacity: 0.7;
}

.PuzzleDisplay_enterCodeGridItem__Canc1 {
  background-color: orange;
  color: black;
  font-weight: bold;
  font-size: 22px;
  font-family: "Source Code Pro", monospace;
  line-height: 22px;
}

.PuzzleDisplay_codePadOverlay__c_Vtf {
  position: absolute;
}

.PuzzleDisplay_codePadContainer__P9Fyi {
  transition: all 0.2s ease;
}

.PuzzleDisplay_codePadContainerButton__24NZ8 {
  display: none;
}

@media (max-width: 768px) {
  .PuzzleDisplay_puzzleDisplay__O33Hq {
    padding-bottom: 160px;
  }
  .PuzzleDisplay_codePadContainer__P9Fyi {
    position: fixed;
    z-index: 1000;
    border-radius: 8px;
    top: 85%;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.6666666667);
  }
  .PuzzleDisplay_codePadContainer__P9Fyi.PuzzleDisplay_visible__QE237 {
    transition: all 0.2s ease;
    background: #111111;
    bottom: 0;
    top: auto;
  }
  .PuzzleDisplay_codePadContainer__P9Fyi.PuzzleDisplay_visible__QE237 .PuzzleDisplay_codePadContainerButton__24NZ8 button {
    background: #e03131 !important;
  }
  .PuzzleDisplay_codePadContainer__P9Fyi .PuzzleDisplay_codePadContainerButton__24NZ8 button {
    background: rgba(224, 49, 49, 0.6666666667) !important;
  }
  .PuzzleDisplay_codePadContainer__P9Fyi .PuzzleDisplay_codePadContainerButton__24NZ8 {
    display: block;
    position: absolute;
    margin-top: 8px;
    top: 0;
    right: 0;
    transform: translateX(100%);
    padding-left: 4px;
    padding-bottom: 8px;
  }
  .PuzzleDisplay_codeSolutionContainer__nb_tu {
    flex-direction: column-reverse;
    row-gap: 16px;
    justify-content: center;
    align-items: center;
  }
  .PuzzleDisplay_puzzleDisplay__O33Hq,
  .PuzzleDisplay_game__4iDmE {
    margin: 0;
    max-width: 100%;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!../../node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!../../node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/firewall/lib/components/CriteriaCardDisplay.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Input colors */
/* Font sizes */
.CriteriaCardDisplay_criteriaCard__bJ_iA {
  padding: 8px;
  padding-top: 20px;
  border-radius: 8px;
  width: 180px;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.6);
}
.CriteriaCardDisplay_criteriaCard__bJ_iA.CriteriaCardDisplay_minimal__OCDHc {
  padding: 0;
  width: -moz-fit-content;
  width: fit-content;
  box-shadow: none;
  padding: 4px;
  margin-top: 40px;
}
.CriteriaCardDisplay_criteriaCard__bJ_iA.CriteriaCardDisplay_minimal__OCDHc .CriteriaCardDisplay_letter__AGXT_ {
  border-radius: 32px;
  text-align: center;
  line-height: 28px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: -4px;
  margin-top: -16px;
}
.CriteriaCardDisplay_criteriaCard__bJ_iA .CriteriaCardDisplay_letter__AGXT_ {
  position: absolute;
  top: -16px;
  left: -4px;
  background-color: rgba(0, 0, 0, 0.6666666667);
  width: 32px;
  height: 32px;
  text-align: center;
  font-weight: bold;
}
.CriteriaCardDisplay_criteriaCard__bJ_iA .CriteriaCardDisplay_label__Dglrg {
  font-size: 13.6px;
  font-family: "Source Code Pro", monospace;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 8px;
}
.CriteriaCardDisplay_criteriaCard__bJ_iA .CriteriaCardDisplay_rule__C4Hwj {
  background-color: rgba(0, 0, 0, 0.6666666667);
  border: 2px solid transparent;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
}
.CriteriaCardDisplay_criteriaCard__bJ_iA .CriteriaCardDisplay_rule__C4Hwj.CriteriaCardDisplay_crossed____dBz {
  border: 2px dashed #f53900;
  position: relative;
  overflow: hidden;
  opacity: 0.5;
}
.CriteriaCardDisplay_criteriaCard__bJ_iA .CriteriaCardDisplay_rule__C4Hwj.CriteriaCardDisplay_crossed____dBz::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  transform: rotate(45deg);
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #f53900;
}
.CriteriaCardDisplay_criteriaCard__bJ_iA .CriteriaCardDisplay_rule__C4Hwj.CriteriaCardDisplay_crossed____dBz::before {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  transform: rotate(-45deg);
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #f53900;
}
.CriteriaCardDisplay_criteriaCard__bJ_iA .CriteriaCardDisplay_rule__C4Hwj.CriteriaCardDisplay_selected__4eFDq {
  border: 2px dashed #0a6;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!../../node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!../../node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/firewall/lib/components/PuzzleCriteriaDisplay.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Input colors */
/* Font sizes */
@media (max-width: 768px) {
  .PuzzleCriteriaDisplay_criteriaCards__uhjvu {
    flex-wrap: nowrap;
    width: 100%;
    max-width: none;
    overflow-x: auto;
    justify-content: flex-start; /* Prevent clipping */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    margin-top: 8px;
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
    /* Hide scrollbar for Chrome, Safari and Opera */
  }
  .PuzzleCriteriaDisplay_criteriaCards__uhjvu::-webkit-scrollbar {
    display: none;
  }
  .PuzzleCriteriaDisplay_criteriaCards__uhjvu {
    /* Ensure cards don't shrink and maintain their width */
  }
  .PuzzleCriteriaDisplay_criteriaCards__uhjvu > * {
    flex-shrink: 0;
    flex-grow: 0;
  }
  .PuzzleCriteriaDisplay_criteriaCards__uhjvu {
    /* Add equal spacing on both sides to center content when it fits */
  }
  .PuzzleCriteriaDisplay_criteriaCards__uhjvu > *:first-child {
    margin-left: auto;
  }
  .PuzzleCriteriaDisplay_criteriaCards__uhjvu > *:last-child {
    margin-right: auto;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!../../node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!../../node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/firewall/lib/components/CopyToClipboard/CopyToClipboard.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Input colors */
/* Font sizes */
.CopyToClipboard_seed__9d4lZ {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6666666667);
  font-family: "Source Code Pro", monospace;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!../../node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!../../node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/firewall/lib/components/CodePad.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Input colors */
/* Font sizes */
.CodePad_codePad__qBfbI {
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  background-color: rgba(255, 255, 255, 0.1333333333);
  padding: 8px;
  border-radius: 8px;
}

.CodePad_codePadButton__suJ45,
.CodePad_codePadHeader__hxGVs,
.CodePad_codePadValue__3Nt4_ {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.6666666667);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.CodePad_codePadValue__3Nt4_ {
  background: rgba(0, 0, 0, 0.2666666667);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3333333333);
}

.CodePad_codePadHeader__hxGVs {
  background-color: transparent;
  font-size: 20px;
}