/* These styles are generated from project.scss. */

/* Remove the gap at the top */
html,
body {

  height: 100vh !important;
  height: 100svh !important;
  /* Ensure the body takes full height */
  margin: 0;
}

.revs-login-bg{
  background: linear-gradient(to top, rgb(83, 107, 114) 0%, rgb(158, 202, 216) 100%);
  background-size: cover;
}

.header {
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* Sidebar styles */
.sidebar {
  height: calc(100vh - 80px);
  /* Subtract the header height */
  position: sticky;
  top: 80px;
  /* Offset for the fixed header */
  min-width: 360px;
  max-width: 360px;
}

.sidebar-mobile {
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
  top: 80px;
  /* Subtract the header height */
  bottom:0;
  background: pink;
  width: 100%;
  /* Offset for the fixed header */
}

.offcanvas-header{
  min-height:80px;
  max-height:80px;
  height:80px;
}

.main-content {
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
  /* Subtract the header height */
  margin-top: 80px;
  /* Add space below the fixed header */
  overflow-y: auto;
}

/* catch a container inside a container */
.container .container {
  margin-top: 20px;
}

.scrollable-list {
  /*flex-grow: 1;*/
  overflow-y: auto;
  margin-top: 10px;
  padding: 5px;
}

.ui-sortable-placeholder {
  background:#AAA !important;
  height: 12px !important;
  visibility: visible !important;
}

/* transparent blurred backgrounds */
.milky-bg-dark{
  background-color: rgba(33, 37, 41, 0.6) !important;
  backdrop-filter: blur(16px) !important;
}
.milky-bg-white{
  background-color: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(16px) !important;
}

/* enable transparent tables */
.table tr td, .table tr th{
  background-color: rgba(0,0,0,0.0) !important;
}

.rev-logo {
  margin-left: 12px;
  max-height: 48px;
}
.rev-logo-sm {
  margin-left: 12px;
  max-height: 24px;
}
.rev-logo-xs {
  margin-left: 5px;
  max-height: 18px;
}

.text-justify {
  text-align: justify;
}

@media (max-width: 992px) {

  /* Sidebar visible only on larger screens */
  .sidebar {
      display: none !important;
      background: orange;
  }
}

@media (min-width: 993px) {
  .mobile-menu {
      display: none !important;
  }
}

.main-menu-item {
  background-color: transparent !important;
}

.main-menu-item:hover {
  background-color: #14829155 !important;
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* Star rating */
div.stars {
  display: inline-block;
}

input.star { display: none; }

label.star {
  float: right;
  padding: 4px;
  font-size: 36px;
  color: rgba(35,30,72, 1.0);
  transition: all .2s;
}

input.star:checked ~ label.star:before {
  content: '\f005';
  color: #f29100;
  transition: all .25s;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
}

input.star-5:checked ~ label.star:before {
  color: #f09918;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: scale(1.3); }

label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}

td a {
  text-decoration: none !important;
}

/* Do not print the print button */
@media print { .noprint { display: none; } }

.question-line {
  border-left: solid #f29100 4px;
}

/* BOOTSTRAP OVERRIDES */
.bg-badge{
  background-color: rgba(166, 206, 57,0.2);
  border: solid rgba(166, 206, 57, 0.3) 1px;
  color: black;
}
.bg-badge:hover{
  background-color: rgba(166, 206, 57, 0.3);
  border: solid rgba(166, 206, 57, 0.3) 1px;
  color: black;
}


.btn-primary {
  background-color: #1ba653;
  border-color: #1ba653;
}

.btn-primary:hover {
  background-color: #127339;
  border-color: #127339
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}


.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
  /* color: #212529; */
  background-color: #127339;
  border-color: #127339;
  box-shadow: 0 0 0 .2rem rgba(166, 206, 57, 1)
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  background-color: #127339;
  box-shadow: 0 0 0 .2rem rgba(166, 206, 57, 1)
}

/* .btn-primary.disabled,
.btn-primary:disabled {
  color: #212529;
  background-color: #7cc;
  border-color: #5bc2c2
} */


/* Row sorting for create view */
.row-grab-handler-col-width{
  width: 48px !important;
}
.row-grab-handler{
  cursor: grab;
  min-width: 48px !important;
}

hr {
  border: none;
  height: 3px;
  color: rgb(0, 0, 0);  /* old IE */
  background-color: rgb(0, 0, 0);  /* Modern Browsers */
}
/* Change radio button color */
.form-check-input {
  width: 1.5rem;  /* Increase size */
  height: 1.5rem; /* Increase size */
  border: 3px solid #127339;; /* Change border color */
}

.form-check-input:checked {
  background-color: #127339; /* Change background color when checked */
  border-color: #127339;;
}

.form-check-input:hover {
  box-shadow: 0 0 5px black;;
}

.form-check-label {
  font-size: 1.1rem; /* Increase label text size */
  margin-left: 0.2rem; /* Add space between the radio button and label */
  margin-right: 0.2rem;
}

/* Custom - Radio/Checkbox button color */
.form-check-input-custom {
  width: 1.5rem !important;  /* Increase size */
  height: 1.5rem !important; /* Increase size */
  border: 3px solid #cccccc !important; /* Change border color */
}

.form-check-input-custom:checked {
  background-color: rgb(35, 30, 72) !important; /* Change background color when checked */
  border-color: rgb(35, 30, 72) !important;
}

/* Optional: Add hover effect */
.form-check-input-custom:hover {
  box-shadow: 0 0 5px rgba(255, 87, 51, 0.5) !important;
}

/* Optional: Adjust label size */
.form-check-label-custom {
  font-size: 1.2rem; /* Increase label text size */
  margin-left: 0.8rem; /* Add space between the radio button and label */
}

/* Customize the range slider track and knob */
input[type="range"].form-range {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%; /* Full width */
  height: 12px; /* Height of the track */
  background: #ddd; /* Track color */
  border-radius: 5px; /* Round track edges */
}

/* Customize the range slider knob (thumb) */
input[type="range"].form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px; /* Size of the knob */
  height: 25px; /* Size of the knob */
  border-radius: 50%; /* Circular knob */
  background-color: rgb(35, 30, 72);; /* Color of the knob */
  border: 2px solid rgb(35, 30, 72);; /* Border color */
  cursor: pointer; /* Pointer cursor on hover */
  margin-top: -6.5px; /* Adjust the margin to center the knob */
}

/* Firefox */
input[type="range"].form-range::-moz-range-thumb {
  width: 25px; /* Size of the knob */
  height: 25px; /* Size of the knob */
  border-radius: 50%; /* Circular knob */
  background-color: rgb(35, 30, 72);; /* Color of the knob */
  border: 2px solid rgb(35, 30, 72);; /* Border color */
  cursor: pointer; /* Pointer cursor on hover */
  margin-top: -6.5px; /* Adjust the margin to center the knob */
}

/* Internet Explorer */
input[type="range"].form-range::-ms-thumb {
  width: 25px; /* Size of the knob */
  height: 25px; /* Size of the knob */
  border-radius: 50%; /* Circular knob */
  background-color: rgb(35, 30, 72); /* Color of the knob */
  border: 2px solid rgb(35, 30, 72); /* Border color */
  cursor: pointer; /* Pointer cursor on hover */
  margin-top: -6.5px; /* Adjust the margin to center the knob */
}

/* Override bootstrap button design */
.btn-primary-custom {
  /*background-color: #231e48;*/
  background-color: rgba(35,30,72, 1.0) !important;
  border-color: rgba(35,30,72, 1.0) !important;
  color: white !important;
}
  .btn-primary-custom:focus {
      /*background-color: #231e48;*/
      background-color: rgba(35,30,72, 1.0) !important;
      border-color: rgba(35,30,72, 1.0) !important;
      color: white !important;
  }
  .btn-primary-custom:hover {
      /*background-color: #231e48;*/
      background-color: #f29100 !important;
      border-color: #f29100 !important;
      color: black !important;
  }
  .btn-primary-custom:active {
      /*background-color: #231e48;*/
      background-color: rgba(35,30,72, 1.0) !important;
      border-color: rgba(35,30,72, 1.0) !important;
      color: black !important;
  }
  .btn-primary-custom:visited {
      /*background-color: #231e48;*/
      background-color: rgba(35,30,72, 1.0) !important;
      border-color: rgba(35,30,72, 1.0) !important;
      color: white !important;
  }

/* Button outline primary currently used by likert scale */
  .btn-outline-primary-custom {
    /*background-color: #231e48;*/
    background-color: white !important;
    border-color: rgba(35,30,72, 1.0) !important;
    color: black !important;
  }
    .btn-outline-primary-custom:focus {
        /*background-color: #231e48;*/
        background-color: rgba(35,30,72, 1.0) !important;
        border-color: rgba(35,30,72, 1.0) !important;
        color: white !important;
    }
    .btn-outline-primary-custom:hover {
        /*background-color: #231e48;*/
        background-color: #f29100 !important;
        border-color: #f29100 !important;
        color: black !important;
    }
    .btn-outline-primary-custom:active {
      /*background-color: #231e48;*/
      background-color: rgba(35,30,72, 1.0)!important;
      border-color: rgba(35,30,72, 1.0) !important;
      color: black !important;
  }
    .btn-outline-primary-custom:checked {
        /*background-color: #231e48;*/
        background-color: rgba(35,30,72, 1.0)!important;
        border-color: rgba(35,30,72, 1.0) !important;
        color: black !important;
    }
    .btn-outline-primary-custom:visited {
        /*background-color: #231e48;*/
        background-color: #f29100 !important;
        border-color: rgba(35,30,72, 1.0) !important;
        color: white !important;
    }

    .btn-check:active+.btn-outline-primary-custom,
.btn-check:checked+.btn-outline-primary-custom
{
    color: #fff !important;
    background-color: rgba(35,30,72, 1.0) !important;
    border-color: rgba(35,30,72, 1.0) !important;
}

/* Signatures */
.svg-signature-container {
  width: 100%;
  height: auto;
  min-height: 120px
}

.svg-signature-container svg {
  width: 100%;
  height: auto;
  min-height: 120px
}

/* Branded standalone error pages */
.revs-error-page {
  align-items: center;
  background: linear-gradient(to top, rgb(83, 107, 114) 0%, rgb(158, 202, 216) 100%);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 64px 0;
  width: 100%;
}

.revs-error-container {
  margin: 0 auto;
  max-width: 760px;
  padding: 0 16px;
  width: 100%;
}

.revs-error-shell {
  margin: 0 auto;
  max-width: 680px;
  text-align: center;
  width: 100%;
}

.revs-error-card {
  background: rgba(255, 255, 255, 0.92);
  border-left: 6px solid #f29100;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(35, 30, 72, 0.18);
  padding: 56px 32px;
}

.revs-error-code {
  color: rgba(35, 30, 72, 1);
  font-size: clamp(3rem, 6vw, 4.75rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 12px;
}

.revs-error-title {
  color: rgba(35, 30, 72, 1);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 20px;
}

.revs-error-message {
  color: rgba(33, 37, 41, 0.72);
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: 36rem;
}

.revs-error-button {
  min-width: 180px;
  padding: 0.75rem 1.5rem;
}

.revs-error-powered-by {
  color: rgba(33, 37, 41, 0.72);
  display: block;
  margin-top: 20px;
}

.revs-error-logo {
  margin-left: 0;
  margin-top: 6px;
  max-height: 22px;
}

@media (max-width: 576px) {
  .revs-error-page {
    padding: 32px 0;
  }

  .revs-error-card {
    padding: 40px 20px;
  }
}