/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/


.mini-vlat.question-container {
  display: grid !important;
  grid-template-columns: minmax(0, 60%) minmax(280px, 40%);
  grid-template-areas:
    "title right"
    "title right";
  column-gap: 28px;
  row-gap: 12px;
  align-items: start;
}

.mini-vlat > .question-title-container {
  grid-area: title;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.mini-vlat > .question-valid-container,
.mini-vlat > .answer-container {
  grid-column: 2;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.mini-vlat .ls-questionhelp {
  display: none !important;
}

.mini-vlat .study-image {
  margin: 0 !important;
}

.mini-vlat .study-image img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
}

.mini-vlat .study-statement {
  margin: 0 0 16px 0 !important;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 600;
}

.mini-vlat ul.answers-list {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.mini-vlat .answer-item {
  margin: 0 0 10px 0;
  padding: 0;
}

.mini-vlat .answers-list input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mini-vlat .answers-list .radio-label {
  display: block;
  width: 100%;
  padding: 18px 24px;
  border-radius: 4px;
  background: #77808a;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  margin: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.mini-vlat .answers-list .radio-label:hover {
  background: #68717b;
}

.mini-vlat .answers-list input[type="radio"]:checked + .radio-label {
  background: #5f6872;
}

.mini-vlat .answers-list input[type="radio"]:focus + .radio-label {
  outline: 2px solid #2c7be5;
  outline-offset: 2px;
}

.mini-vlat .radio-item label::before,
.mini-vlat .radio-item label::after {
  display: none !important;
  content: none !important;
}

.mini-vlat .timer_header {
  margin-bottom: 14px;
}

.study-timeup-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.study-timeup-box {
  width: 360px;
  max-width: calc(100vw - 32px);
  background: rgba(26, 31, 38, 0.96);
  color: #ffffff;
  border-radius: 0;
  padding: 18px 20px 20px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.study-timeup-message {
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 18px 0;
}

.study-timeup-button {
  display: inline-block;
  min-width: 120px;
  border: 0;
  border-radius: 4px;
  padding: 14px 28px;
  background: #1f6feb;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.study-timeup-button:hover,
.study-timeup-button:focus {
  background: #1a63d6;
  color: #ffffff;
  outline: none;
}

.main-study-chart,
.main-study-matrix {
  margin-bottom: 0 !important;
}

.main-study-chart img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
}

.main-study-matrix .table-responsive,
.main-study-matrix table {
  width: 100% !important;
}

.main-study-matrix table {
  table-layout: auto !important;
}

.main-study-matrix th,
.main-study-matrix td {
  padding: 8px 10px !important;
}

.main-study-matrix .question-title-container,
.main-study-matrix .answer-container,
.main-study-chart .question-title-container,
.main-study-chart .answer-container {
  width: 100% !important;
  max-width: 100% !important;
}

.group-container:has(> .main-study-chart):has(> .main-study-matrix) {
  display: block !important;
}

@media (max-width: 1100px) {
  .mini-vlat.question-container {
    display: block !important;
  }

  .mini-vlat > .question-title-container,
  .mini-vlat > .question-valid-container,
  .mini-vlat > .answer-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mini-vlat > .answer-container {
    margin-top: 16px !important;
  }

  .main-study-matrix {
    margin-top: 20px !important;
  }
}