/******************
    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
*/

:root {
  --clr-light: #f1f1f1;
  --clr-dark: #8b919a;
  --clr-primary: #dbffa2;
  --clr-secondary: #c3fcf2;
  --clr-accent: #ff7750;
  --foreground: var(--clr-dark);
  --background: var(--clr-light);
  --list: var(--clr-list-root);  
  --clr-welcome:#31708f;
  --welcome: var(--clr-welcome);
  --toggle-label: var(--clr-toggle-label);
  --clr-danger: #e75041;
  --danger: var(--clr-danger);
}

.darkmode {
  --clr-light: #f1f1f1;
  --clr-dark: #8b919a;
  --clr-primary: #202302;
  --clr-secondary: #00100d;
  --clr-accent: #ff7750;

  --foreground: var(--clr-light);
  --background: var(--clr-dark);
  
  --clr-list-root: black;
  --list: var(--clr-list-root);

  --clr-welcome: white;
  --welcome: var(--clr-welcome);

  --clr-toggle-label: #53565a;
  --toggle-label: var(--clr-toggle-label);

  --clr-danger: #e19796;
  --danger: var(--clr-danger);
}
#survey-nav{
    background-color: #dbdddd; 
}
.question-container
{
    background:none;
    border:none;
}
body {
    background: var(--background);
    color: var(--foreground);
}
#outerframeContainer
{
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none;
}
#outerframeContainer {
    padding-bottom:90px;
}
/* toogle day and night */
.header-toggle-holder {
    padding: 5px;
    background-color: #dbdddd;

}
.toggle-label {
    font-style: italic;
    font-size: 11px;
    margin-right: 80px;
    color: var(--toggle-label);
    line-height: 3;
}
.toggle-checkbox {
    font-size: 25px;
}
.form-check-input:checked {
        background-color: #286090;
    border-color: #204d74;
}

.survey-name,.survey-description,.survey-welcome {
    color: var(--welcome)
}
.question-text {
    color: var(--welcome)
}

.ls-questionhelp, .ls-question-help {
    color: var(--welcome)
}
/*progress-bar */
.progress-bar{
    background-color:#337ab7;
}





  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }
  
  /*footer */
  .footer-holder {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #dbdddd;
    text-align: center;
    z-index: 2;
}
.logo-footer {
    margin: 0 auto;
    width: 13rem;
    padding-top: 20px;
    padding-bottom: 20px;
}
 
/*common*/
.btn-primary{
    background-color: #337ab7;
    border-color: #2e6da4;
}
.btn-primary:focus, .btn-primary:hover{
    background-color: #286090;
    border-color: #204d74;
}
.text-danger {
    color: var(--danger) !important;
}
.list-group-item, .modal-body {
    color: var(--list);
}
.ls-label-question {
    font-size: 1.2em;
}
/* navigation */
#ls-button-previous {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

#ls-button-submit {
   border-top-left-radius: 0;
    border-bottom-left-radius: 0; 
}
select.form-control.text-right,
input.form-control.numeric,
.ls-answers tbody .answertext ,
.subquestion-list label{
  text-align: left !important;
}

.question-container.input-error {
    box-shadow: 0 10px 20px rgba(169,68,66,.9);
}
tr.has-error th {
    color: #e75041;
    font-weight: 700;
}
tr.has-error:hover th {
    color: #e75041;
    font-weight: 700;
}


.dropdown-menu.show.nav-overflow-scroll{
   overflow-y: scroll;
   height: 90vh;
}

/* Use this class on Question container for horizontal table scrolling*/
.scrollXTableView table tr td,
.scrollXTableView table thead tr th,
.scrollXTableView table col {
  display: none;
}
.scrollXTableView table thead tr td:first-child,
.scrollXTableView table col:first-child {
  display: table-column;
}
.scrollXTableView col {
  width: 250px !important;
}
.scrollXTableView col:first-child {
  width: 330px !important;
}
.scrollXTableView .answer-container {
  overflow: scroll;
}
.scrollXTableView1 table thead tr td:first-child,
.scrollXTableView1 table col:first-child {
  display: table-column;
}
.scrollXTableView1 col {
  width: 100px !important;
}
.scrollXTableView1 colgroup:first-child col:first-child {
  width: 330px !important;
}
.scrollXTableView1 .answer-container {
  overflow: scroll;
}
.form-control.input-sm {
    width: 25%;
}
.multiple-list .form-control.input-sm {
    width: 50%;
}

@media (max-width: 768px) {
    .ls-group-remaining .col-md-4, .ls-group-total .col-md-4 {
        width: 33.33%;
    }
    .ls-group-remaining .col-md-3, .ls-group-total .col-md-3 {
        width: 25%;
    }
    .ls-group-remaining .col-md-2, .ls-group-total .col-md-2 {
        width: 16.66%;
    }
   .form-control.input-sm {
        width: 100%;
    }
    .multiple-list .form-control.input-sm {
        width: 100%;
    }
}