/******************
    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 inherit a core template and just add here some CSS, you'll still benefit from all the updates
******************/

/* Root variables */
:root {
  --main: #2c5696;
  --secondary: #2c5696;
  --bs-primary: #2c5696;
  --bs-primary-rgb: 44, 86, 150;
  --progressbar: #ddd;
  --q-bg: #eee;
  --q-text: #333;
  --q-border: #dce4ec;
  --q-help: #44484b;
  --q-error: #902419;
  --q-error-border: red;
  --q-nr: #333;
  --input-border: #dce4ec;
  --input-border-hover: #8f8f8f;
  --btn-bg: #eee;
  --btn-bg-hover: #888;
  --btn-text: #1a242f;
  --btn-text-hover: #fff;
  --btn-border: #e6e6e6;
  --btn-border-hover: #929292;
}

/* General body styles */
html,
body {
  height: 100%;
}

body {
  font-size: 16px;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #f6f6f6;
  color: #333 !important;
  padding-top: 90px !important;
  height: 100%;
}

body.ut-embedded {
  padding-top: 0 !important;
  background: transparent;
}

/* VEEB-116 hide tip text */
.hide-tip {
  display: none !important;
}

/* Login button colors */
#lbtn button {
  background-color: #2c5696;
  color: white;
  border: none;
}

/* Align login page content to center vertically */
#surveys-list-jumbotron {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Adjust background box color */
.bg-light {
  background: #ebebeb !important;
}

/* Question description text */
.ls-questionhelp {
  font-size: 90%;
  display: flex;
  align-items: center;
}

.ls-questionhelp {
  margin-left: 1.45rem !important;
}

.ls-question-mandatory {
  font-size: 90%;
}

.ls-question-mandatory .fa-exclamation-circle {
  margin-right: 1px;
  font-size: 16px;
}

/* Adding padding to buttons and selection menus */
.btn {
  padding: 1rem 2rem;
}

.form-select {
  padding: 1rem 3rem;
}

.form-control {
  padding: 1rem;
}

/* Targeting elements with both form-select and form-control classes */
[class~="form-select"][class~="form-control"] {
  padding: 1rem 3rem 1rem 2rem;
}

/* Navbar styles */
.navbar-light {
  background-color: var(--main);
  height: 4rem; /* Define navbar height explicitly */
}

.navbar .container-fluid {
  background-color: #2c5696;
  position: relative;
  z-index: -2;
  height: 100%;
}

.navbar-light .navbar-collapse,
.navbar-light .navbar-form {
  box-shadow: none;
  text-align: right;
  height: 100%;
}

.navbar-collapse {
  justify-content: end;
  align-items: stretch;
}

button.navbar-toggler {
  outline: 2px solid white !important;
}

html body .navbar.navbar-light.navbar-fixed-top {
  box-shadow: 0 0 5px #000000;
}

.navbar-nav {
  align-items: start;
}

.ut-navbar {
  min-height: 60px;
}

.navbar-nav .nav-item {
  display: flex;
  align-items: center;
  height: 100%; /* Make the nav item take the full height of the navbar */
}

.navbar-nav .nav-item .nav-link {
  display: flex;
  align-items: center; /* Vertically center the text within the link */
  height: 100%;
  background-color: transparent; /* Ensure default background is transparent */
  color: #fff !important;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus {
  color: hsla(0, 0%, 100%, .55) !important;
}

@media (min-width: 992px) {
  .navbar-nav .nav-item .nav-link {
    padding: 0 1rem; /* Adjust padding as needed */
  }

  .navbar-nav .nav-item .nav-link:hover,
  .navbar-nav .nav-item .nav-link:focus {
    background-color: #fff !important;
    color: #000 !important;
  }
}

@media (max-width: 991px) {
  .navbar-nav {
    margin-bottom: 1rem;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }
}

.navbar-nav .nav-item .list-group-itemindex-item .dropdown-item {
  display: flex;
  justify-content: space-between;
}

.navbar-nav .nav-item .list-group-itemindex-item .dropdown-item .fa-exclamation-triangle:before {
  font-family: 'FontAwesome', serif;
  font-style: normal;
}

.navbar-nav .nav-item .list-group-itemindex-item .dropdown-item .ut-warning.fa-exclamation-triangle:before {
  color: #ff8300;
}

.navbar-nav .nav-item .list-group-itemindex-item .dropdown-item .ut-danger.fa-exclamation-triangle:before {
  color: #e53935;
}

/* Remove extra padding from navbar button */
[class="nav navbar-nav navbar-action-link navbar-right ms-auto"] {
  padding-right: 0;
}

.navbar-brand img.logo {
  margin-top: -8px;
  left: 50%; /* Center horizontally based on the parent */
}

/* Removing vertical space around progress bar */
.brand-logo .top-container .top-content {
  padding-top: 0;
}

body .top-container {
  margin-top: 0 !important;
}

/* UT Custom styles */

/* VEEB-86 1.2 remove min-height */
#surveys-list-container {
  min-height: 0 !important;
}

/* VEEB-108 move to newline */
.dir-ltr .ls-questionhelp {
  flex-direction: column;
  align-items: flex-start;
}

/* Save for later page styling */
/* Target the specific save-message card element */
.save-message.card.bg-light.mb-3.clearfix {
  flex: 0 0 auto;
  width: 66.66667%; /* Equivalent to col-lg-8 */
  margin-left: 16.66667%; /* Equivalent to offset-lg-2 */
}

/* Ensure these rules only apply on large screens (>=992px) */
@media (max-width: 991.98px) {
  .save-message.card.bg-light.mb-3.clearfix {
    width: 100%; /* Adjust as needed for smaller screens */
    margin-left: 0;
  }
}

/* Target the specific return element */
.url-wrapper-survey-return,
.save-form .alert.alert-danger.list-unstyled,
.load-form .alert.alert-danger.list-unstyled {
  flex: 0 0 auto;
  width: 66.66667%;
  margin-left: 16.66667%;
  padding-top: 0.8rem;
}

.url-wrapper-survey-return {
  padding-bottom: 4rem;
}

/* Ensure these rules only apply on large screens (>=992px) */
@media (max-width: 991.98px) {
  .url-wrapper-survey-return,
  .save-form .alert.alert-danger.list-unstyled,
  .load-form .alert.alert-danger.list-unstyled {
    width: 100%; /* Adjust as needed for smaller screens */
    margin-left: 0;
  }
}

.save-survey-form .save-survey-row {
  margin-bottom: 24px !important;
}

.save-survey-form .asterisk {
  padding-right: 0px;
}

.save-survey-form .save-survey-label {
  padding-bottom: 0.3rem;
}

.save-message .text-info,
.save-message .text-info:hover {
  font-weight: normal;
}

.save-message .h2 {
  font-weight: bold;
}

.save-message .text-warning {
  color: #933127 !important;
}

.ls-label-question p:last-child {
  margin-bottom: 0;
}

.container-md-relative {
  position: relative;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: inherit;
}

/* Error page styling */
#error-card .card-body {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}

#error-card .text-danger {
  font-weight: bold;
}

@media (max-width: 768px) {
  .ut-navbar:after {
    display: none;
  }
}

.logo-container {
  display: flex !important;
  align-items: center; /* Vertically center the content */
  height: 100%; /* Ensure the logo container takes the full height of the navbar */
  margin-top: 0; /* Reset any previous top margin */
}

.survey-welcome.text-primary {
  color: var(--bs-body-color) !important;
}

/* Centering the language changer at the start of a survey */
.form-change-lang {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Ensure it takes full width of the parent */
  margin: 0 auto; /* Center it horizontally */
  padding: 10px 0; /* Add some padding for better visual appearance */
}

.form-change-lang .col-auto,
.form-change-lang .col-form-label {
  margin: 0 5px; /* Add some margin between the elements */
}

/* VEEB-297. Hide language changer form submit button when JS is allowed. */
html.js .form-change-lang button.ls-language-changer-item {
  display: none;
}

/* Removing borders from tables */
tbody,
td,
tfoot,
th,
thead,
tr {
  border: none;
}

.table > :not(:first-child) {
  border-top: none;
}

/* Adding some space to completed-text */
/* .completed-text {
    margin-top: 3rem;
} */

/* Alginment centering on token page */
.token-page .h3 {
  text-align: center;
}

.token-page p.text-info {
  text-align: center;
}

.token-page .alert {
  width: 66.666667%; /* Equivalent to col-lg-8 */
  margin-left: 16.666667%; /* Equivalent to offset-lg-2 */
}

@media (max-width: 991.98px) {
  .token-page .alert {
    width: 100%; /* Full width on smaller screens */
    margin-left: 0; /* Remove left margin on smaller screens */
  }
}

/* Question styles */

/* Fix thank you completed text at end of survey */
.completed-wrapper {
  text-align: center;
  margin-top: 100px;
}

.completed-text p:first-child {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 0;
}

.completed-text p:nth-child(2) {
  font-size: 18px;
  font-weight: normal;
}

.ls-answers tbody .answertext {
  text-align: left;
}

/* Styling asterisk in question texts */
.asterisk {
  padding-top: 6px;
  padding-right: 6px;
}

/* Replacing FontAwesome question mark with exclamation mark */
.ls-questionhelp:before {
  content: "\f06a" !important;
  left: -1.3rem !important;
}

/* Exclamation mark error color */
.input-error .question-valid-container .ls-questionhelp::before {
  color: var(--q-error) !important;
}

.question-help-container {
  padding-left: 16px;
}

/* Moving checkboxes inline with bullets */
.checkbox-item {
  padding-left: 1.8rem;
}

/* Radio button and checkbox movement START */
.control-label.radio-label:before {
  top: 3px;
}

li.radio-item input[type="radio"]:checked + label::after {
  top: 6px;
}

li.radio-item.radio-text-item input[type="radio"]:checked + label::after {
  top: 3px;
}

.control-label.checkbox-label:before {
  top: 3px;
}

.checkbox-item input[type="checkbox"]:checked + label::after {
  top: 4px;
}

/* Radio button and checkbox movement END */

/* Table row fix */
.answers-list.radio-list tr {
  display: table-row; /* Ensure tr elements display as table rows */
}

li.answer-item.radio-item {
  text-align: left;
  vertical-align: middle; /* Vertically center the content */
}

.answer-item.radio-item input[type="radio"] {
  margin: 0 auto; /* Center the radio button within its cell */
}

.answer-item.radio-item label {
  display: inline-block;
  margin-left: 5px;
}

.question-title-container {
  background-color: var(--q-bg);
  color: var(--q-text);
  padding: 1.2em 1em 0.5em 1em !important;
  border: 1px solid var(--q-border);
}

.questionvalidcontainer .questionhelp.text-info,
.questionvalidcontainer .questionhelp.text-danger {
  text-align: left;
  padding-left: 2px;
  font-size: 0.8em;
  font-weight: 700;
}

.text-info.questionhelp {
  color: var(--q-help);
  font-weight: bold;
}

.text-info,
.text-info:hover {
  color: var(--q-help) !important;
  font-weight: bold;
  margin-top: 8px;
}

/* VEEB-86 2.1 survey description text */
.survey-description.text-info.text-center {
  margin-top: 30px;
  font-weight: normal;
  text-align: left !important;
}

#welcome-container .survey-name.text-center {
  font-weight: 600;
}

/* VEEB-86 2.3 well box */
.group-description .well {
  background-color: var(--q-bg);
  border: 1px solid var(--q-border);
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* VEEB-86 3.4 privacy head */
.ls-privacy-head.h4.text-primary {
  color: var(--q-text) !important;
  font-weight: 600;
}

/* VEEB-86 3.5 number of questions box */
.number-of-questions {
  background-color: var(--q-bg);
  color: var(--q-text);
  padding: 1em;
  border: 1px solid var(--q-border);
  margin-top: 20px;
  margin-bottom: 10px;
}

.questionvalidcontainer .text-danger {
  color: #902419;
  margin-bottom: 0;
  text-align: left;
  font-size: smaller;
}

.input-error {
  border: 2px solid #902419;
}

.answer-container {
  padding-top: 1em !important;
  padding-bottom: 1em !important;
  background: white;
}

.question-help-container {
  padding-bottom: 1em !important;
}

.questionvalidcontainer .questionhelp.text-info,
.questionvalidcontainer .questionhelp.text-danger {
  text-align: left;
  padding-left: 2px;
  font-size: 0.8em;
  font-weight: 700;
}

.ls-answers {
  padding: 0;
}

.x-questions.well.well-sm {
  border: 1px solid #ddd;
}

.x-questions.well.well-sm:empty {
  display: none;
}

/* Survey container */
#navigator-container {
  margin-top: 3em;
}

/* Additional styles */
.progress-bar {
  color: #464646 !important;
  background-color: #ffffff;
  border-color: #929292;
}

/* Qnumbers and Qnames */
.text-muted {
  color: var(--q-text) !important;
}

/* Multiple select checkbox colors */
label::after {
  background-color: #fff;
  color: var(--btn-text) !important;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary:hover {
  background-color: #2c5696 !important;
  border-color: #2c5696 !important;
  color: #fff;
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  background-color: #2c5696;
  border-color: #2c5696;
  color: #fff;
}

.btn-primary {
  background-color: lightgrey;
  border-color: darkgray;
  color: #000;
}

.btn-outline-secondary {
  border-color: #52595f;
  color: #52595f;
}

/* VEEB-293. Fix multiple-opt question type unchecked focused button style. */
.multiple-opt .checkbox-list .btn-check:not(:checked):focus + .btn-primary {
  background-color: lightgrey !important;
  border-color: darkgray !important;
  color: #000;
}

.multiple-opt .checkbox-list .btn-check:focus + .btn-primary {
  box-shadow: 0 0 0 .25rem rgba(49,132,253,.5);
}

/* Numerical answer */
input.numeric {
  text-align: left;
  min-width: 60px;
}

/* Multiple answers */
li.radio-item,
li.checkbox-item,
li.radio-text-item,
li.checkbox-text-item {
  margin-bottom: 0.5em;
}

/* Short answer */
.ls-answers.text-item .col-md-6 input {
  width: 50% !important;
}

/* Long answer */
.ls-answers.text-item .col-md-6 {
  width: 100%;
}

/* D&D question box */
.sortable-list {
  border: 2px solid #dbe4ec;
  border-radius: 4px;
}

.list-group-item {
  margin: 4px;
  background-color: #f6f6f6;
  border: 2px solid #ecf0f1;
}

ul.sortable-list li:last-child {
  margin-bottom: 4px;
}

/* Yes/No icons */
.yesno-button span.fa {
  display: none;
}

.yesno-button label {
  margin-bottom: -2px;
}

/* Matrix qtype table border none */
.table-bordered {
  border: none;
}

/* Fix drag and drop qtype */
.dragDropTable ul.dragDropChoiceList,
.dragDropTable ol.dragDropRankList {
  padding-bottom: 0px !important;
}

/* Bootstrap 3 alert colors */
.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

/* TextArea active green */
.form-control:focus {
  border-color: var(--input-border-hover);
}

/* Add more space to radio list */
li.answer-item.radio-item.radio {
  padding-bottom: 10px;
}

/* Text after asterisk to one line */
span.text-danger.asterisk + p {
  display: inline;
}

/* Text danger */
.text-danger,
.text-danger:hover {
  color: #933127 !important;
}

/* Multichoice padding */
.multiple-choice-with-comment.table > tbody > tr > td {
  padding-left: 35px !important;
}

.progress .progress-bar {
  font-size: 15px;
  line-height: 21px;
}

/* Frontpage styles */
.frontpage p {
  font-size: 1em;
}

/* Dual scale separator */
.array-flexible-dual-scale thead td.header_separator,
.array-flexible-dual-scale tbody td.dual_scale_separator.information-item {
  padding: 0;
}

@media only screen and (max-width: 767px) {
  .array-flexible-dual-scale tbody td.dual_scale_separator.information-item {
    min-height: 1px;
    border-bottom: 1px solid var(--q-border);
  }
}

@media only screen and (min-width: 768px) {
  .array-flexible-dual-scale col.separator {
    border-left: 1px solid var(--q-border);
    width: 0.1% !important;
  }
}

/* Lang switching main */
p[lang="en"] {
  display: block;
}

p[lang="et"] {
  display: none;
}

body.lang-et p[lang="en"] {
  display: none;
}

body.lang-et p[lang="et"] {
  display: block;
}

button > p {
  margin: 0px !important;
}

span.question-number:after {
  content: ".";
}

span.question-number:empty {
  display: none;
}

#surveys-list-jumbotron #loginform a,
#surveys-list-jumbotron #loginform br {
  display: none;
}

/* Additional utility styles */
.card {
  border: 1px solid #d6dfe1;
}

.card-header {
  color: #ffffff;
  background-color: var(--main);
  border-color: var(--q-help);
  padding: 16px;
}

.card-header + .collapse > .card-body {
  border-top-color: #668e2d;
}

.card-header .badge {
  color: #2c3e50;
  background-color: #ffffff;
}

.card-footer + .collapse > .card-body {
  border-bottom-color: #668e2d;
}

.card .btn-primary:hover,
.card .btn-primary:focus {
  --btn-text: #fff;
}

.card .btn-primary,
.card .btn-secondary {
  color: var(--btn-text);
  background-color: var(--btn-bg);
  border-color: var(--btn-border);
}

.card-footer {
  background-color: #fff;
}

.card .alert-warning {
  color: #333;
}

.survey-welcome,
.survey-description {
  margin: 30px 0;
}

/* Remove answer field from Show Text qtype */
.boilerplate .question-valid-container,
.boilerplate .answer-container {
  display: none;
}

/* Fixing margin for last list item */
ul.list-unstyled.col-md-12.col-xs-12 li:last-child {
  margin-bottom: 0;
}

/* Styles for final page */
.completed-text.text-center {
  margin-top: 100px;
}

/* Error block styles */
#block_error div > p {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.42857143;
  color: #2c3e50;
}

.question-help-container {
  padding-bottom: 0px !important;
  margin-bottom: -1em;
}

/* Remove extra margin from last paragraph in group desc */
.group-description.row.card.px-3 py-4.p:last-child {
  margin-bottom: 0;
}

.languageselectlabel {
  display: none;
}

.ls-label-question.empty {
  padding-bottom: 0.5em;
}

.question-container {
  background: #fff;
}

@media (max-width: 300px) {
  .navbar-light {
    width: calc(100% - 60px);
  }
}

/* RTL language styles */
.dir-rtl #navigator-container .col-6.text-start {
  float: right;
}

.dir-rtl #navigator-container .col-6.text-end {
  float: left;
}

.dir-rtl .question-valid-container,
.dir-rtl .question-help-container {
  text-align: inherit;
}

.dir-rtl .top-container .progress {
  transform: rotate(180deg);
}

.dir-rtl .progress .progress-bar {
  transform: rotate(180deg);
}

.dir-rtl .numeric-item .col-md-2 {
  float: revert;
}

.dir-rtl .question-number,
.dir-rtl .question-code {
  float: right;
}

.dir-rtl .navbar-brand img.logo.img-fluid {
  padding-right: 27px;
  margin-left: -28px;
}

/* Control label styles */
@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: left !important;
    margin-bottom: 0;
    padding-top: 5px;
  }
}

#outerframeContainer {
  min-height: 100%;
  /* word-wrap: normal; */
  -webkit-hyphens: unset;
  -moz-hyphens: unset;
  -ms-hyphens: unset;
  -o-hyphens: unset;
  hyphens: unset;
}

/* Custom Bootstrap buttons style for making likert scale */
@media (min-width: 768px) {
  .likert-7 .bootstrap-buttons-div {
    width: calc(100% / 7);
  }

  .likert-5 .bootstrap-buttons-div {
    width: calc(100% / 5);
  }
}

/* Styles for Assessment feedback in the end of survey */
.completed-wrapper table.assessments.table {
  text-align: left;
}

.completed-wrapper table.assessments.table th {
  font-weight: 600;
  padding: 20px;
  padding-bottom: 0;
}

.completed-wrapper table.assessments.table td {
  padding: 20px;
}

.ls-answers .has-error th {
  color: #913027;
  font-weight: bold;
}

/* VEEB-182. Fix vanilla theme modal styles. */
.modal:before {
  content: unset !important;
}

.modal-dialog {
  display: flex !important;
  vertical-align: unset !important;
}

.file-upload-modal .modal-dialog {
  margin: 0 auto !important;
  align-items: center;
}

.question-valid-container,
.answer-container {
  padding-left: 16px;
  padding-right: 16px;
}

.question-container:last-of-type {
  margin-bottom: 0;
}

.group-container:last-child {
  margin-bottom: 0;
}

/* VEEB-301. Space alert modal footer buttons evenly. */
#bootstrap-alert-box-modal .modal-footer.mandatory-soft {
  justify-content: space-evenly;
}

#bootstrap-alert-box-modal .modal-footer.mandatory-soft .btn {
  flex: 1;
}