/*
   LEGACY TOKENS - do not add to these, and prefer the design system's names.

   --main-theme-color predates the design system and was its own crimson (#9F0102) sitting a shade
   away from the brand's (#96110d), so two reds shipped side by side depending on which stylesheet a
   page happened to load. They are now ALIASES of the canonical tokens published by
   resources/css/app.css, with the historical values as fallbacks so a page that somehow loads this
   file without app.css still renders.

   They survive only because ~50 declarations across backoffice.css and three views still name them.
   New work uses --brand-primary / --brand-primary-hover directly; see
   docs/design-system/01-foundations.md. Anything still reading these on a page that does NOT load
   backoffice.css is a bug, not a fallback: an undefined custom property makes the whole declaration
   invalid and it is silently dropped, which is how the respondent form lost its active-section
   highlight entirely.
*/
:root{
  --main-theme-color: var(--brand-primary, #96110d);
  --main-theme-color-dark: var(--brand-primary-hover, #7a0d0a);
  --main-theme-color-dark-border: var(--brand-primary-hover, #7a0d0a);
  --nav-alt-height: 90px;
}
nav.navbar2{
  border-radius: 5px 5px 0 0;
}
nav .logo{
  height: 40px;
  width: auto;
  margin: 0.5rem;
}
.text-black{
  color: #000 !important;
}
.d-grid{
  display: grid !important;
}
aside{
  position: fixed;
}
.wrapper{
  min-height: 100vh;
}
table a{
  color: unset;
  text-decoration: none;
}
table a:hover{
  color: unset;
  text-decoration: none;
}
table .fa, table .fas{
  font-size: 1.3rem;
  margin-left: 0.5rem;
}
.table-list-actions a,
.table-list-actions button{
        display: block;
        margin-bottom: 0.33rem;
}
.table-list-actions a i,
.table-list-actions button i{
    margin-right: 0.5rem;
}
.table-list-actions a:hover,
.table-list-actions button:hover{
    text-decoration: underline
}
.btn-link, .btn-link:hover{
  color:unset;
}
[type=search]{
  appearance: auto;
  -webkit-appearance: auto;
}
[class*=sidebar-dark-] {
  background-color: #333333;
}
.navbar-dark {
  background-color: #333333;
}

.main-header {
  border-bottom: unset;
}
/*
   NAVBAR ALIGNMENT

   The bar is a flex row and every one of its items must be the same height, or "align-items: center"
   centres boxes of different sizes and the two groups drift apart. They did: see the note at the top
   of _components/navbar.blade.php.

   Declared here rather than in the view so the rule covers the bar wherever it is rendered, and so
   an item added later inherits the height instead of setting the bar's.
*/
.main-header .navbar-nav > .nav-item {
  display: flex;
  align-items: center;
}
.main-header .navbar-nav > .nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  /* 44px: the bar holds the smallest tap targets in the application. */
  min-height: 2.75rem;
}
/* A control that submits the logout form is a <button>; it must not look or measure like one. */
.main-header .navbar-nav > .nav-item > button.nav-link {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
/* Nothing in the bar may carry the block margin a <form> gets by default. */
.main-header form { margin-bottom: 0; }

/*
   THE LEGACY BREADCRUMB, for the pages not yet on <x-ui.page-header>.

   Bootstrap gives it #007bff on the #f4f6f9 content background - 3.68:1 - and #6c757d for the
   current crumb at 4.33:1. Both are below the 4.5:1 this product requires, on every unmigrated
   page at once. Migrating a page removes this markup entirely, so these rules are temporary by
   construction; they exist because leaving live pages under the threshold while the migration
   works through them is not a defensible trade for three declarations.
*/
.content-header .breadcrumb a { color: var(--brand-primary, #96110d); }
.content-header .breadcrumb a:hover { color: var(--brand-primary-hover, #7a0d0a); }
.content-header .breadcrumb .breadcrumb-item.active,
.content-header .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--text-secondary, #645a56); }
.color-main{
  color: var(--main-theme-color) !important;
}
.text-underline{
  text-decoration: underline;
}
.btn-theme{
  color: #fff !important;
    background-color: var(--main-theme-color) !important;
    border-color: var(--main-theme-color) !important;
}
.btn-theme:hover {
  color: #fff !important;
  background-color: var(--main-theme-color-dark) !important;
  border-color: var(--main-theme-color-dark-border) !important;
}
.btn-outline-theme{
  color: var(--main-theme-color) !important;
  border-color: var(--main-theme-color) !important;
}
.btn-outline-theme:hover{
    color: #fff !important;
    background-color: var(--main-theme-color) !important;
    border-color: var(--main-theme-color) !important;
}
.text-theme{
  color: var(--main-theme-color) !important;
}

.btn-dark-blue{
  color: #fff !important;
    background-color: #021933 !important;
    border-color: #000b16 !important;
}
.btn-dark-blue:hover {
  color: #fff !important;
  background-color: #000f21 !important;
  border-color: #000306 !important;
}

.card-theme:not(.card-outline)>.card-header {
  background-color: var(--main-theme-color-dark);
}
.card-theme:not(.card-outline)>.card-header, .card-dark:not(.card-outline)>.card-header a {
  color: #fff;
}

.card-dark:not(.card-outline)>.card-header {
  background-color: #333333;
}

.card.dark-mode{background-color: #343a40; color: #fff;}

.btn-empty{
  border: 1px solid black;
}
.breadcrumbs{
  font-family: 'Rubik', sans-serif;
  font-size: 0.95rem;
  color: black;
}
.breadcrumbs a{
  text-decoration: underline;
  color: black;
}
h1, h2, h3, h4, h5{
  font-family: 'Rubik', sans-serif;;
}
.w-30 {
  width: 30% !important;
}
.login-logo a, .register-logo a {
  color: var(--main-theme-color) !important;
}
@media(min-height: 768px) and (max-height: 949px){
  .h-lg-1{
    height: 64px;
  }
  .h-lg-2{
    height: 128px;
  }
  .h-lg-3{
    height: 192px;
  }
  .h-lg-4{
    height: 256px;
  }
  .h-lg-5{
    height: 320px;
  }
  .h-lg-6{
    height: 384px;
  }
  .h-lg-7{
    height: 448px;
  }
  .h-lg-8{
    height: 512px;
  }
  .h-lg-9{
    height: 576px;
  }
  .h-lg-10{
    height: 640px;
  }
  .h-lg-11{
    height: 704px;
  }
  .h-lg-12{
    height: 768px;
  }
}

@media(min-height: 950px){
  .h-xl-1{
    height: 90px;
  }
  .h-xl-2{
    height: 180px;
  }
  .h-xl-3{
    height: 270px;
  }
  .h-xl-4{
    height: 360px;
  }
  .h-xl-5{
    height: 450px;
  }
  .h-xl-6{
    height: 540px;
  }
  .h-xl-7{
    height: 630px;
  }
  .h-xl-8{
    height: 720px;
  }
  .h-xl-9{
    height: 810px;
  }
  .h-xl-10{
    height: 900px;
  }
  .h-xl-11{
    height: 990px;
  }
  .h-xl-12{
    height: 1080px;
  }
}
.card-img-cap{
  position: absolute;
  bottom: 0;
  color: white;
}
.card{
  border-radius: 0;
}
a.text-white:hover {
  color: #c1c1c1 !important;
}

.overlay{
  position: fixed !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.dataTables_wrapper .row{
  margin: 0 !important;
}
.b-error{
  border-color: var(--main-theme-color) !important;
}

@media (min-width: 1200px) {
  .col-xl {-ms-flex-preferred-size: 0;flex-basis: 0;-ms-flex-positive: 1;flex-grow: 1;max-width: 100%;}
  .row-cols-xl-1 > * {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}
  .row-cols-xl-2 > * {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}
  .row-cols-xl-3 > * {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;}
  .row-cols-xl-4 > * {-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;}
  .row-cols-xl-5 > * {-ms-flex: 0 0 20%;flex: 0 0 20%;max-width: 20%;}
  .row-cols-xl-6 > * {-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;}
  .col-xl-auto {-ms-flex: 0 0 auto;flex: 0 0 auto;width: auto;max-width: 100%;}
  .col-xl-1 {-ms-flex: 0 0 8.333333%;flex: 0 0 8.333333%;max-width: 8.333333%;}
  .col-xl-2 {-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;}
  .col-xl-3 {-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;}
  .col-xl-4 {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;}
  .col-xl-5 {-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%;}
  .col-xl-6 {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}
  .col-xl-7 {-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;}
  .col-xl-8 {-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;}
  .col-xl-9 {-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;}
  .col-xl-10 {-ms-flex: 0 0 83.333333%;flex: 0 0 83.333333%;max-width: 83.333333%;}
  .col-xl-11 {-ms-flex: 0 0 91.666667%;flex: 0 0 91.666667%;max-width: 91.666667%;}
  .col-xl-12 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}
  .order-xl-first {-ms-flex-order: -1;order: -1;}
  .order-xl-last {-ms-flex-order: 13;order: 13;}
  .order-xl-0 {-ms-flex-order: 0;order: 0;}
  .order-xl-1 {-ms-flex-order: 1;order: 1;}
  .order-xl-2 {-ms-flex-order: 2;order: 2;}
  .order-xl-3 {-ms-flex-order: 3;order: 3;}
  .order-xl-4 {-ms-flex-order: 4;order: 4;}
  .order-xl-5 {-ms-flex-order: 5;order: 5;}
  .order-xl-6 {-ms-flex-order: 6;order: 6;}
  .order-xl-7 {-ms-flex-order: 7;order: 7;}
  .order-xl-8 {-ms-flex-order: 8;order: 8;}
  .order-xl-9 {-ms-flex-order: 9;order: 9;}
  .order-xl-10 {-ms-flex-order: 10;order: 10;}
  .order-xl-11 {-ms-flex-order: 11;order: 11;}
  .order-xl-12 {-ms-flex-order: 12;order: 12;}
  .offset-xl-0 {margin-left: 0;}
  .offset-xl-1 {margin-left: 8.333333%;}
  .offset-xl-2 {margin-left: 16.666667%;}
  .offset-xl-3 {margin-left: 25%;}
  .offset-xl-4 {margin-left: 33.333333%;}
  .offset-xl-5 {margin-left: 41.666667%;}
  .offset-xl-6 {margin-left: 50%;}
  .offset-xl-7 {margin-left: 58.333333%;}
  .offset-xl-8 {margin-left: 66.666667%;}
  .offset-xl-9 {margin-left: 75%;}
  .offset-xl-10 {margin-left: 83.333333%;}
  .offset-xl-11 {margin-left: 91.666667%;}
}
@media (min-width:1367px){
  .col-xxl-1{-ms-flex: 0 0 8.333333%;flex: 0 0 8.333333%;max-width: 8.333333%;}
  .col-xxl-2{-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;}
  .col-xxl-3{-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;}
  .col-xxl-4{-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;}
  .col-xxl-5{-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%;}
  .col-xxl-6{-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}
  .col-xxl-7{-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;}
  .col-xxl-8{-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;}
  .col-xxl-9{-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;}
  .col-xxl-10{-ms-flex: 0 0 83.333333%;flex: 0 0 83.333333%;max-width: 83.333333%;}
  .col-xxl-11{-ms-flex: 0 0 91.666667%;flex: 0 0 91.666667%;max-width: 91.666667%;}
  .col-xxl-12{-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}}
@media print{
  @page{
    size:A4;
  }
  #btnPrint{
    display: none !important;
  }
  .content-wrapper{
    background-color: white !important;
  }
  .carousel-item:not(:first-child) {
    margin-top: 0 !important;
  }
}

.question-settings-sidebar{
  right: 0;
  top: 0;
  position: fixed;
  width: 25rem;
  background-color: whitesmoke;
  z-index: 1034;
}
.input-field.selected{
  box-shadow: 0rem 0rem 1rem rgba(0,0,0,.15)!important;
  border: solid 1px #e1e1e1;
}

/*  Change Management */
input.question.changed,
input.option.changed,
input.weight.changed,
.version-settings-container .changed{
  border-bottom: solid 1px #ffc107;
}
input.question.new,
input.option.new,
input.weight.new{
  border-bottom: solid 1px #07ff1c;
}
/*input.question.changed:before,
input.option.changed:before,
input.weight.changed:before,*/
.carouselControls a[data-target="#formsCarousel"].changed:before{
  content: "⦿ ";
  color: #ffc107;
}
/*div:has(input.question.new):before,
div:has(input.option.new):before,
div:has(input.weight).new:before,*/
.carouselControls a[data-target="#formsCarousel"].new:before{
  content: "⦿ ";
  color: #07ff1c;
}
.deleted,.for-deletion{
  opacity: 0.75;
  text-decoration: line-through;
}
.text-line-through{
  text-decoration: line-through !important;
}

.progress-bar-container .categoryName{
  overflow: hidden;
  text-align: left !important;
}


.progress-bar-container .progress-bar,.progress-bar-container .progress{
  border-radius: 3px;
}
.variables-chart .scale{
  font-size: small;
}
/*.report-description{text-align: justify;}*/
.variables-chart .scale > *{
  width:10%;
}
.variables-chart .border-left{
  border-color: #969a9e !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}
.variables-chart .cg{
  color: #444444;
}
.variables-chart .variable{
  text-transform: capitalize;
  font-weight: bold;
  }
.variables-chart .bar-holder{
  padding-top:0.5rem;
}
.variables-chart .bullet{
  font-size: 2rem;
  font-weight: 900;
}
.variables-chart *:not(.border-left), .variables-chart{
  border: none !important;
}
.pulsate{
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
.payment-choice-logo{
  max-height: 58px;;
}

.btn-shadow{
  box-shadow: 0 .5rem 0.5rem rgba(0, 0, 0, .15) !important;
  color: #343a40;
}
.btn-shadow:hover{
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}