/* Global */
h2 {
  font-size: 42px !important;
}

h3 {
  font-size: 30px !important;
  font-weight: normal !important;
}

p,
ul,
ol,
a,
label {
  font-size: 26px !important;
}

.hpe-blue {
  background: transparent !important;
}

.hpe-gray {
  background: transparent !important;
}

.hpe-gradient {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #7ee9fa 25%,
    #4fe0d3 60%,
    #35d19b 100%
  ) !important;
}

@media (max-width: 1200px) {
  p,
  ul,
  ol,
  a,
  label {
    font-size: 18px !important;
  }

  h2 {
    font-size: 36px !important;
  }

  h3 {
    font-size: 24px !important;
    font-weight: normal !important;
  }
}

/*Login Page */
.login-body .hpe-gradient {
  background: linear-gradient
    (to right, #ffffff 0%, #7ee9fa 25%, #4fe0d3 60%, #35d19b 100%) !important;
}

.formpage-body .block-left_column,
.formpage-body .block-right_column {
  color: black !important;
}

body.login-body .block-content,
body.sign-up-body .block-content,
body.forgot-password-body .block-content,
body.reset-link-sent-body .block-content,
body.reset-password-body .block-content,
body.password-changed-body .block-content {
  color: black !important;
}

body.login-body .block-content a:visited,
body.sign-up-body .block-content a:visited,
body.forgot-password-body .block-content a:visited,
body.reset-link-sent-body .block-content a:visited,
body.reset-password-body .block-content a:visited,
body.password-changed-body .block-content a:visited {
  color: black !important;
}

body.login-body .block-content,
body.sign-up-body .block-content,
body.forgot-password-body .block-content,
body.reset-link-sent-body .block-content,
body.reset-password-body .block-content,
body.password-changed-body .block-content {
  color: black !important;
}

.login-body .block-columns {
  max-width: 100% !important;
  margin: 0px !important;
  padding: 40px 160px !important;
  display: flex;
  align-items: center;
}

.login-body .block-right_column form button {
  background-color: #292d3a !important;
}

.login-body .block-right_column form button:hover {
  background-color: #535c66 !important;
}

.login-body .block-right_column .block-content:nth-of-type(2) a {
  color: black !important;
}

.login-body .block-right_column .block-content:nth-of-type(2) a:hover {
  color: #01a982 !important;
}

@media (max-width: 1100px) {
  .login-body .block-columns {
    padding: 20px !important;
  }
}

/* Forgot Password screen */
.forgot-password-body .hpe-gradient {
  background: linear-gradient
    (to right, #ffffff 0%, #7ee9fa 25%, #4fe0d3 60%, #35d19b 100%) !important;
}

.forgot-password-body .block-columns {
  max-width: 100% !important;
  margin: 0px !important;
  padding: 40px 160px !important;
  display: flex;
  align-items: center;
}

.forgot-password-body .block-right_column form button {
  background-color: #292d3a !important;
}

.forgot-password-body .block-right_column form button:hover {
  background-color: #535c66 !important;
}

body.login-body .block-content a,
body.sign-up-body .block-content a,
body.forgot-password-body .block-content a,
body.reset-link-sent-body .block-content a,
body.reset-password-body .block-content a,
body.password-changed-body .block-content a {
  color: black !important;
}

@media (max-width: 1100px) {
  .forgot-password-body .block-columns {
    padding: 20px !important;
  }
}

/* Reset Link sent Screen */
.reset-link-sent-body .hpe-gradient {
  background: linear-gradient
    (to right, #ffffff 0%, #7ee9fa 25%, #4fe0d3 60%, #35d19b 100%) !important;
}

.reset-link-sent-body .block-columns {
  margin: 0px !important;
  padding: 40px 160px !important;
  display: flex;
  align-items: center;
  max-width: 100% !important;
}

@media (max-width: 1100px) {
  .reset-link-sent-body .block-columns {
    padding: 20px !important;
  }
}

/*Sign up Screen */
.sign-up-body .hpe-gradient {
  background: linear-gradient
    (to right, #ffffff 0%, #7ee9fa 25%, #4fe0d3 60%, #35d19b 100%) !important;
}
.sign-up-body .block-columns {
  margin: 0px !important;
  padding: 40px 160px !important;
  display: flex;
  align-items: center;
  max-width: 100% !important;
}

.sign-up-body .block-columns .block-right_column .block-form form button {
  background-color: #292d3a !important;
}
.sign-up-body .block-columns .block-right_column .block-form form button:hover {
  background-color: #535c66 !important;
}

.sign-up-body
  .block-columns
  .block-right_column
  .block-content:nth-of-type(2)
  a {
  border: 4px solid #01a983 !important;
  color: black !important;
}
.sign-up-body
  .block-columns
  .block-right_column
  .block-content:nth-of-type(2)
  a:hover {
  border: 4px solid #068667 !important;
}

@media (max-width: 1100px) {
  .sign-up-body .block-columns {
    padding: 20px !important;
  }
}

/* Footer */
footer {
  padding: 10px 160px !important;
  color: black !important;
  background-color: #e6e8e9 !important;
  font-size: 18px !important;
}

@media (max-width: 1100px) {
  footer {
    padding: 10px !important;
    font-size: 13px !important;
  }
}

/* All under navbar */
.navbar .navbar-logo img {
  height: 36px !important;
}

.navbar {
  padding: 5px 160px 0 !important;
}

.navbar .navbar-logo {
  flex: 1;
}

.navbar .nav-links a.active {
  font-weight: 500 !important;
}

.navbar .nav-links a {
  font-weight: 400 !important;
  font-size: 22px !important;
}

@media (max-width: 880px) {
  .navbar .nav-links a {
    font-size: 18px !important;
    padding: 20px !important;
  }

  .navbar {
    padding: 20px !important;
  }
}

@media (max-width: 440px) {
  .navbar .nav-links a {
    font-size: 13px !important;
  }
}

@media (max-width: 504px) {
  .navbar .nav-links a {
    padding: 6px !important;
  }
}

/* Profile menu */
.navbar .profile-menu {
  flex: none;
}

.navbar .profile-menu button {
  font-size: 22px !important;
  font-weight: 400 !important;
}

.navbar .profile-menu button {
  font-weight: 500 !important;
}

.navbar .dropdown-content {
  top: 30px !important;
}

.navbar .dropdown-content a {
  font-size: 22px !important;
}

/* Homepage background */

body.home-body {
  background-image: url("https://d176piw5yo7jl9.cloudfront.net/hpe/images/ed938116-43b1-40aa-88bd-c9377bbbd685_homepage-2.original.jpg");
  background-size: cover !important;
  background-position: right !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
}

body.home-body .block-content {
  color: black !important;
  min-height: 100vh !important;
}

/* Homepage */
body.home-body .block-content h2 {
  font-size: 68px !important;
}

body.home-body > .block-content ul li a::after {
  content: none !important;
}

body.home-body > .block-content ul li {
  background: #292d3a !important;
  padding: 18px 60px !important;
  cursor: pointer !important;
}

body.home-body > .block-content ul li:hover {
  background: #535c66 !important;
}

body.home-body footer {
  background: transparent !important;
}

@media (max-width: 1400px) {
  body.home-body {
    display: flex;
    justify-content: center;
    background-position: top !important;
    background-image: url("https://d176piw5yo7jl9.cloudfront.net/hpe/images/be568d99-41d1-49c0-ac04-c817c72f10a5_mobile-hom.original.jpg") !important;
  }

  body.home-body .block-content {
    justify-content: center !important;
  }
}

/* Page header */
.page-header {
  background: #e6e8e9 !important;
  color: black !important;
  padding: 60px 160px !important;
}

.page-header .block-content h2 {
  padding-bottom: 25px;
}

@media (max-width: 1000px) {
  .page-header {
    padding: 20px 40px !important;
  }
}

/* Games & Activities */

.tabs-container .tabs {
  display: none !important;
}

#tab-content {
  background-color: #ffffff !important;
}

/* Game grid */
.games-area {
  padding: 40px 160px !important;
  background-color: #ffffff !important;
}

.games-area h3 {
  display: none !important;
}

.grid-container {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
  --c1: #62e5f6;
  --c2: #0070f8;
  --c3: #7764fc;
}

.grid-container > :nth-child(3n + 1 of .grid-item) {
  border-color: var(--c1) !important;
}
.grid-container > :nth-child(3n + 2 of .grid-item) {
  border-color: var(--c2) !important;
}
.grid-container > :nth-child(3n of .grid-item) {
  border-color: var(--c3) !important;
}

.grid-item {
  border: #01a983 4px solid !important;
  border-top-width: 35px !important;
  background: #ffffff !important;
}

.grid-item h4 {
  height: 5rem !important;
  font-size: 30px !important;
}

.grid-item p {
  font-size: 22px !important;
}

.grid-item a {
  background-color: #292d3a !important;
  border-radius: 50px !important;
  padding: 18px 60px !important;
  font-size: 26px !important;
  font-weight: normal !important;
}

.grid-item a:hover {
  background-color: #535c66 !important;
}

.grid-item a::after {
  content: none !important;
}

.grid-item .thumbnail {
  border: 7px solid #eee !important;
}

@media (max-width: 773px) {
  .games-area {
    padding: 40px !important;
  }
}

@media (max-width: 550px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  }
}

/* Activities area */
.activities-area {
  display: none !important;
}

/* Resources */
.intermediate-content {
  background-color: #ffffff !important;
}

.intermediate-content .block-columns {
  padding: 0 160px !important;
}

.intermediate-content .block-left_column h2 {
  color: black !important;
}

.intermediate-content .block-right_column {
  display: none !important;
}

.intermediate-content .block-content {
  padding-top: 20px !important;
}

.resource-accordion {
  padding: 0 120px !important;
}

.block-accordion .block-header {
  font-size: 26px !important;
  background: #e6e8e9 !important;
}

.block-accordion .block-header.open {
  background: #292d3a !important;
  margin-bottom: 0 !important;
}

.block-accordion .block-accordion_content .block-content {
  border: 1px solid #292d3a !important;
  padding: 20px 30px;
}

.block-accordion .block-accordion_content .block-content a {
  text-decoration: none !important;
}

.block-accordion .block-accordion_content .block-content a:hover {
  text-decoration: underline !important;
  color: #068667;
}

.resource-accordion .block-accordion .block-video video {
  max-width: 50% !important;
  padding: 20px 0;
}

@media (max-width: 1200px) {
  .resource-accordion {
    padding: 0 20px !important;
  }

  .intermediate-content .block-columns {
    padding: 0 20px !important;
  }
}

/* Dashbaord */
.tabs a {
  font-size: 26px !important;
}

.stats {
  display: none !important;
}

.leaderboard-content {
  padding-top: 60px;
}

.progress-bar {
  height: 80px !important;
  background: linear-gradient(90deg, #62e5f6, #00e0af, #068667) !important;
}

.rank-indicator {
  transform: translateX(50%) scale(6, 5) !important;
}

.progress-labels .section {
  font-size: 26px !important;
  padding-top: 0 !important;
}

.progress-labels .bracket-group .section::before {
  font-size: 26px !important;
}

.progress-labels .bracket-group .section::after {
  font-size: 26px !important;
}

.leaderboard-content .ranking-section {
  background: #ffffff !important;
}

.leaderboard-card {
  background: #ffffff !important;
}

.leaderboard-card .leaderboard-header {
  border-radius: 100px !important;
}

@media (max-width: 1600px) {
  .progress-labels .section {
    font-size: 14px !important;
    padding-top: 30px !important;
  }
}

@media (max-width: 575px) {
  .progress-labels .section {
    font-size: 10px !important;
    padding-top: 30px !important;
  }
}

/* Game journey tasks */
body.activity .block-columns {
  padding: 80px 160px 10px 160px !important;
  min-height: calc(100svh - 73px - 33px) !important;
  align-items: center !important;
  gap: 100px !important;
}

body.activity .block-right_column {
  padding-top: 0px !important;
}

.block-columns .block-right_column h2 {
  padding-bottom: 20px;
}
.block-columns .block-right_column {
  text-align: center;
}

.block-columns .block-right_column .block-image,
.block-columns .block-right_column .block-video {
  margin: 40px 0 0 0 !important;
}

.block-columns .block-right_column .block-content figure {
  padding: 20px 40px 10px 40px;
}

.block-columns .block-right_column .block-image img,
.block-columns .block-right_column .block-image video,
.block-columns .block-right_column .block-video img,
.block-columns .block-right_column .block-video video {
  background-color: none !important;
  padding: 4px !important;
  box-shadow: none !important;
  max-width: 80% !important;
}

@media (max-width: 1200px) {
  body.activity .block-columns {
    padding: 10px 20px 20px 20px !important;
  }
}

@media (max-width: 767px) {
  body.activity .block-columns {
    flex-direction: column !important;
    gap: 50px !important;
  }
}

/* Next Button */
body.activity #next-task-ui .task-completion-container {
  justify-content: center !important;
  padding: 40px 0 20px 0 !important;
}

body.activity #next-task-ui .task-completion-container .task-actions .button {
  background-color: #292d3a !important;
  padding: 12px 60px !important;
  font-weight: 500 !important;
  font-size: 26px !important;
}

body.activity
  #next-task-ui
  .task-completion-container
  .task-actions
  .button:hover {
  background-color: #535c66 !important;
}

.green-button::after,
.button::after {
  content: none !important;
}

@media (max-width: 550px) {
  body.activity #next-task-ui .task-completion-container .task-actions .button {
    padding: 8px 40px !important;
    font-size: 18px !important;
  }
}

/* Arrow in next button */
#next-task-ui .task-actions .button::after {
  content: "" !important;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* Download button */
body.activity .block-columns .block-right_column .block-image + .block-content,
body.activity .block-columns .block-right_column .block-video + .block-content {
  text-align: center;
  padding: 20px 0 0 0 !important;
}

body.activity .block-columns .block-right_column .block-content > p > a {
  background-color: transparent;
  font-weight: 500 !important;
  border-radius: 50px !important;
  border: 4px solid #01a982;
  color: black;
}

body.activity .block-columns .block-right_column .block-content > p > a:hover {
  border: 4px solid #068667 !important;
}

/* Game layout */
.main-content {
  align-items: center !important;
  background-color: #f2f2f2 !important;
  box-shadow: 8px 18px 40px rgba(0, 0, 0, 0.18) !important;
  margin: 40px 160px 40px 0 !important;
  padding: 40px !important;
  display: flex;
  justify-content: center;
}

/*Sidebar */
.sidebar h1 {
  color: black !important;
}

.sidebar h2 {
  color: #01a982 !important;
}

.sidebar {
  padding: 40px !important;
  text-align: left !important;
  width: 600px !important;
  box-shadow: -8px 18px 40px rgba(0, 0, 0, 0.18);
  margin: 40px 0 40px 160px;
}

.sidebar .score-box .save-button {
  width: 200px !important;
  padding: 12px 60px !important;
  background: #292d3a !important;
  color: white !important;
  font-weight: normal !important;
  font-size: 22px !important;
  border-radius: 50px !important;
  border: 1px solid #292d3a !important;
}

.sidebar .score-box .save-button:hover {
  color: #292d3a !important;
  background: white !important;
}

.sidebar .score-box > p:nth-child(2) {
  justify-content: center !important;
  border: 1px solid #d2d2d2;
  border-radius: 8px !important;
  background: #f2f2f2 !important;
  box-shadow: 8px 18px 40px rgba(70 69 69 / 18%) !important;
  text-align: center !important;
  margin: 40px 0 20px 0 !important;
}

@media (max-width: 1200px) {
  .sidebar {
    max-width: 300px;
  }
}

@media (max-width: 768px) {
  .sidebar.active h1 {
    margin-top: 20px !important;
  }

  .sidebar.active h2 {
    font-size: 26px !important;
  }

  .sidebar.active .info p {
    color: black;
  }

  .sidebar.active .mobile-play-box p {
    color: black;
    margin-top: 20px !important;
  }

  .sidebar .sidebar-play-button {
    margin: 20px 0 !important;
    background: #01a982 !important;
  }
}

/* Match game */
.match-game-wrapper {
  display: flex !important;
  justify-content: center !important;
  height: 100%;
  width: 100% !important;
}

.card-back {
  background-color: #f2f2f2 !important;
}

/* Game question modal */
.modal .modal-content {
  padding: 40px !important;
  border: none !important;
  max-width: 50% !important;
  text-align: center !important;
}

#question-display {
  text-align: center !important;
}

.question-interlude .question-header {
  font-weight: normal !important;
  font-size: 30px !important;
}

.question-interlude form {
  margin-top: 4rem !important;
}

.question-interlude .answer-option {
  border: 1px solid #d2d2d2 !important;
  background-color: #f7f7f7 !important;
  box-shadow: 2px 2px 2px #e3e3e3;
}

.answer-option {
  padding: 20px !important;
  border: none !important;
  font-weight: normal !important;
}

.answer-option:hover {
  background-color: #e6e8e9 !important;
}

.question-interlude .answer-option:has(input:checked) {
  background-color: #01a982 !important;
  color: white !important;
}

.answer-option:has(input:checked) {
  background-color: #01a982 !important;
  color: white !important;
  border: 2px solid #01a982 !important;
}

.question-progress {
  text-align: left;
  margin-top: 30px;
  font-size: 20px;
}

.question-interlude .submit-btn {
  background-color: #292d3a !important;
  border: 1px solid #292d3a !important;
  font-weight: normal !important;
  padding: 14px 100px !important;
  border-radius: 50px !important;
  font-size: 22px !important;
}

.question-interlude .submit-btn:hover {
  background-color: white !important;
  color: #292d3a !important;
}

.feedback-section {
  padding: 30px 0 !important;
}

.feedback-section.correct {
  color: #05cc93 !important;
  font-weight: bold;
}

@media (max-width: 1200px) {
  .match-game-wrapper .question-container .question-header {
    font-size: 22px !important;
  }

  .match-game-wrapper .question-container .question-progress {
    font-size: 14px !important;
  }

  #answers-section .submit-answer button {
    font-size: 16px !important;
    padding: 10px 60px !important;
  }

  .match-game-wrapper .question-interlude form {
    margin-top: 1rem !important;
  }
}

@media (max-width: 650px) {
  .match-game-wrapper .modal .modal-content {
    max-width: 90% !important;
  }
}

@media (max-width: 500px) {
  #answers-section .submit-btn {
    font-size: 12px !important;
  }
}

/* Results container */
.results-container {
  height: 100%;
  display: flex;
  justify-content: center;
}

.game-layout .results-container a {
  border-color: 2px solid#292d3a !important;
  background-color: #292d3a !important;
  border-radius: 50px !important;
  padding: 14px 60px;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.game-layout .results-container a:hover {
  background-color: #535c66 !important;
}

/* Past attempts */

body.gamepage-body .content-area {
  padding: 0px !important;
  margin: 40px 160px !important;
}

.content-area table .thead {
  font-size: 26px !important;
}

.content-area table tbody {
  font-size: 22px !important;
}

body.gamepage-body .content-area a {
  padding: 14px 50px !important;
  background-color: #292d3a !important;
  color: white !important;
  border-radius: 50px !important;
  text-decoration: none;
  font-weight: 500;
}

body.gamepage-body .content-area a:hover {
  background-color: #535c66 !important;
}

/* EOG Survery */
.modal .modal-content .close-button {
  font-size: 3rem !important;
  right: 2rem !important;
}

.survey-header {
  font-size: 30px !important;
  text-align: center;
  padding-bottom: 20px;
  font-weight: 500 !important;
}

#survey-modal form fieldset legend {
  font-size: 26px !important;
  text-align: center !important;
}

#survey-modal #id_rating > div label,
#survey-modal #id_selling_rating > div label {
  font-size: 60px !important;
}

#survey-modal #id_rating,
#survey-modal #id_selling_rating {
  text-align: center !important;
}

#survey-modal textarea {
  height: 200px !important;
  font-size: 26px !important;
  padding: 20px !important;
}

#survey-modal .submit-button {
  text-align: center !important;
  padding-top: 20px;
}

#survey-modal .submit-button button {
  background-color: #292d3a !important;
  padding: 18px 80px !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  border-radius: 50px !important;
}

#survey-modal .submit-button button:hover {
  background-color: #535c66 !important;
  cursor: pointer !important;
}

#survey-modal .modal-content button.modal-close.green-button {
  color: #fff !important;
  background-color: #292d3a !important;
  border-radius: 50px !important;
  padding: 18px 80px !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  margin-bottom: 20px;
}

#survey-modal .modal-content button.modal-close.green-button:hover {
  background-color: #535c66 !important;
}

#survey-modal .modal-content h3 {
  margin-bottom: 20px;
}

/* Millionaire Game */
.question-header {
  font-size: 30px !important;
  /* margin-bottom: 40px !important;  be more specific its interferring with match game*/
}

.question-container.question-multichoice {
  display: flex;
  flex-direction: column;
  /* gap: 80px;  be more specific its interferring with match game*/
}

.question-container .hint-message {
  padding-bottom: 40px !important;
  font-size: 26px !important;
  color: #01a982 !important;
}

.hint-bar.desktop-only {
  margin-top: 50px !important;
  justify-content: center !important;
}

.hint-bar.desktop-only .need-a-hint {
  font-size: 22px !important;
}

.hint-bar.desktop-only .hint-btn {
  background-color: #0070f8 !important;
  color: white !important;
  font-size: 22px !important;
  padding: 10px 20px !important;
  font-weight: normal !important;
}

.hint-bar.desktop-only .hint-btn:hover {
  background-color: #0152b6 !important;
}

#answers-section .submit-answer button {
  background-color: #292d3a !important;
  color: white !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  padding: 14px 80px !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  border: none !important;
}

#answers-section .submit-answer button:hover {
  background-color: #535c66 !important;
}

#answers-section .answer-option,
#answers-section .modal .modal-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .main-content {
    padding: 20px !important;
    flex-direction: column !important;
  }

  .main-content .score-bar.mobile-only {
    color: #292d3a !important;
    gap: 20px;
    background-color: #292d3a !important;
  }

  .score-bar.mobile-only .save-button {
    border: 2px solid #292d3a !important;
    color: #292d3a !important;
  }

  .modal.escapable .modal-content {
    flex-direction: column !important;
    gap: 30px;
    max-width: 90% !important;
  }

  .modal.escapable .modal-content .close-button {
    right: 1.5rem !important;
    top: 0.3rem !important;
  }

  .modal.escapable .modal-content p:first-of-type {
    padding-top: 30px;
  }

  .modal.escapable .modal-content button {
    background-color: #0070f8 !important;
    border: none !important;
    border-radius: 8px;
    color: white !important;
    font-size: 16px !important;
    padding: 10px 20px !important;
    font-weight: normal !important;
  }

  .mobile-only .hint-btn {
    background-color: #0070f8 !important;
    font-weight: normal !important;
    font-size: 16px !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
  }
}

/* Next question */
#answers-section .submit-btn {
  background-color: #292d3a !important;
  color: white !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  padding: 14px 80px !important;
  border-radius: 50px !important;
  border: none !important;
}

#answers-section .submit-btn:hover {
  background-color: #535c66 !important;
}

/* Fill in the blank game */
#question-display {
  display: flex;
  justify-content: center;
}

.question-madlib + div {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 20px !important;
}

.question-madlib .word-bank {
  background-color: #f2f2f2 !important;
  justify-content: center !important;
  padding: 40px 0 !important;
}

.question-madlib .word-bank h4 {
  font-size: 26px !important;
  font-weight: 500;
}

.question-madlib .word-bank button {
  color: white !important;
  font-size: 20px !important;
  background-color: #01a982 !important;
  padding: 10px;
  border-radius: 50px !important;
}

.question-madlib .word-bank button:hover:not(:disabled) {
  color: white !important;
  background-color: #068667 !important;
}

.question-madlib .word-bank button:disabled {
  background-color: #d4d8db !important;
}

.question-madlib .submit-btn {
  background-color: #292d3a !important;
  color: white !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  padding: 14px 60px !important;
  border-radius: 50px !important;
}

@media (max-width: 920px) {
  .question-madlib .word-bank button {
    font-size: 14px !important;
  }
}

/* Click here when active */
.question-madlib .blank.active {
  background-color: transparent !important;
  border-bottom: 6px solid #01a982 !important;
  font-weight: 500 !important;
  color: #01a982 !important;
}

.question-madlib .blank {
  color: #01a982 !important;
}

/* Jeopardy Game */
.jeopardy-container {
  background-color: #f2f2f2 !important;
  padding: 0px !important;
  width: 100% !important;
}

.jeopardy-container table th {
  background-color: #01a982 !important;
  padding: 2rem !important;
  font-size: 26px !important;
  text-transform: none !important;
  font-weight: 500 !important;
}

.jeopardy-container table td {
  border: 2px solid #d4d8db !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 26px !important;
}

.jeopardy-container table td:hover {
  border-color: #292d3a !important;
  background-color: #292d3a !important;
}

.jeopardy-container td.answered:hover {
  background-color: #d1d1d1 !important;
  border-color: #d1d1d1 !important;
  cursor: not-allowed !important;
}

.jeopardy-container form {
  padding-top: 30px;
}

.jeopardy-container form p {
  padding-bottom: 30px;
}

.jeopardy-container .answer-option {
  border: 2px solid #d4d8db !important;
}

.jeopardy-container .form-actions {
  justify-content: center !important;
}

.jeopardy-container .form-actions button {
  padding: 14px 60px !important;
  border-radius: 50px !important;
  background-color: #292d3a !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}

.jeopardy-container form .form-actions button:hover {
  background-color: #535c66 !important;
}

.jeopardy-container .modal-content .question-container.question-multichoice {
  gap: 0px !important;
}

.jeopardy-container .modal-content {
  text-align: center !important;
}

.jeopardy-container .game-actions button {
  padding: 14px 80px !important;
  background-color: #292d3a !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  border-radius: 50px !important;
}

.jeopardy-container .game-actions button:hover {
  background-color: #535c66 !important;
}

/*Media queries */

@media (max-width: 1495px) {
  .main-content,
  .sidebar {
    margin: 10px 0 10px 20px !important;
  }
}

@media (max-width: 1260px) {
  .main-content,
  .sidebar {
    margin: 0px !important;
    padding: 0px !important;
  }

  .main-content {
    padding: 30px !important;
  }

  .sidebar {
    padding: 20px !important;
  }
}

@media (max-width: 1200px) {
  .jeopardy-mobile .score-bar {
    background-color: #b1b9be !important;
  }

  .jeopardy-mobile .score-bar .save-button {
    border: 2px solid #292d3a !important;
    color: white !important;
    background-color: #292d3a !important;
  }

  .mobile-category {
    border: 2px solid #01a982 !important;
  }

  .mobile-category h3 {
    color: #01a982 !important;
  }

  .mobile-questions .mobile-question {
    border: 2px solid #292d3a !important;
  }

  .jeopardy-container .game-actions button {
    font-size: 18px !important;
    padding: 10px 40px !important;
  }
}

@media (max-width: 1000px) {
  .jeopardy-container .question-display h2 {
    font-size: 20px !important;
  }

  .jeopardy-container .question-display form p {
    font-size: 20px !important;
  }

  .jeopardy-container .answer-option {
    font-size: 20px !important;
  }
}

@media (max-width: 768px) {
  .jeopardy-container .modal .modal-content {
    max-width: 90% !important;
  }

  .jeopardy-container .form-actions button,
  .jeopardy-container #answers-section .submit-btn {
    font-size: 16px !important;
    padding: 10px 60px !important;
  }
}

/* Random CSS Quereies that need to override */
@media (max-width: 783px) {
  #answers-section .submit-btn {
    font-size: 14px !important;
    padding: 10px 40px !important;
  }
}