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

/******************
    Vitae main theme 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
*/

/*
General layout edits

*/
.vitae body, body {
    font-size: 12pt;
    color: #000;
    line-height: normal;
    /*footer changes */
    padding-bottom: 0; /* no bottom padding, footer should be bottom aligned */
    padding-top: 15px;/* now is redefine in JS to fit any title length */
    flex-direction: column; /* article, then footer */
    display: flex; /* flex, to extend the content to full size */
    min-height: 60vh; /* full height, to bottom-align footer */   
}

body > article, .vitae body > article {
    flex: 1; /* the main article should use as much space as possible -> for footer*/
}

.footer-vitae {
    text-align: center; 
} 

.vitae .top-container.space-col {
    margin-top: 0;
}

.vitae .navbar-default {
    background-color: #FFF;
    border-color: #FAFAFA;
}

/*
Fonts
*/
.font-avenir {
    font-family: 'Nunito';
}

/*
Navigation
*/
.vitae #ls-button-previous, .vitae #ls-button-submit {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    font-size: 14pt;
}

/*
Groups
*/
.vitae .group-description.row.well.space-col {
    border: none;
    background-color: #FFF;
    box-shadow: none;
}

/*
Questions
*/
.vitae .question-container {
    margin-bottom: 1em;
    border: none;
    background-color: #fff;
}

/* Quick edits
* use these to quickly edit colors/fontsizes etc
*/

.vitae h1, h1 {
    font-size:20pt;
    font-weight: 800;
}

.vitae h2, h2 {
    font-size:18pt;
    font-weight: 600;
}

.vitae h3, h3 {
    font-size:16pt;
    font-weight: 400;
}

.vitae h4, h4 {
    font-size:14pt;
    font-weight: 400;
}

.vitae p, body, li {
    line-height: normal;
    font-size:12pt;
}

@media only screen and (max-width: 768px) {
    .vitae h1 {
        font-size:18pt;
    }

    .vitae h2 {
        font-size:16pt;
    }
    .vitae h3 {
        font-size:14pt;
    }
    
    .vitae h4 {
        font-size:12pt;
    }
    
    .vitae p, body, li, .vitae #ls-button-previous, .vitae #ls-button-submit{
        line-height: normal;
        font-size:12pt;
    }
}

.ls-answers label, .ls-answers th {
  font-weight: 400;
  font-size:12pt;
}

.btn {
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  font-size: 14pt;
  line-height: 1.42857143;
}

/* youttube iframe full widht */
.custom-youtube-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.custom-responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* switch between full width container  */
#outerframeContainer {
   width: 80%; /* remove inital for full-width */
}

.logo {
  width: 20%;
}

.triadeQuestion .left-text {
  float: left;
  margin-left: -5%;
  text-align: right;
  width: 45%;
  font-size: 14pt;
}

.triadeQuestion .right-text {
  float: right;
  margin-right: -5%;
  text-align: left;
  width: 45%;
  font-size: 14pt;
}

.triadeQuestion .top-text {
  width: 40%;
  text-align: center;
  line-height: 100%;
  font-size: 14pt;
}

.triade-cancel .radio__label {
  line-height: normal;
  font-size: 14pt;
  font-weight: normal;
  color: black;
}

.checkbox {
  font-size: 2rem;
  color: black;
}

.checkbox__control {
  display: inline-grid;
  width: 1.2em;
  height: 1.2em;
  border-radius: 0.25em;
  border: 0.1em solid black;
}

.btn.active, .btn:active {
  background: lightgray;
}

.triadeQuestion .triade-draggable-droppable {
  background-color: #01689b;
}

.btn-primary {
  color: #fff;
  background-color: #01689b;
  border-color: #2e6da4;
}

.btn-default {
  color: #black;
}

.elicit-button {
  min-height: 80px !important;
}

.text-info {
  color: #01689b;
}


@media (max-width: 767px) {

	.visible-xs-block {
        display: block !important;
    }
	
    .visible-xs-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 768px) {

	.visible-xs-block {
        display: none !important;
    }
	
    .visible-xs-inline-block {
        display: none !important;
    }
}

/* fix lists on smaller screens */

@media only screen and (max-width: 768px) {
    .answers-list ul.list-unstyled.col-sm-6.col-xs-12 {
        margin-bottom: 0px!important;
    }
    
    /* Make outerframeContainer wider on small resolutions (mobile)  */
    #outerframeContainer {
        width: 100%;
    }
}

.ls-questionhelp:before{content:"\f05a"}

.elicit-button label {
  padding: 1pt !important;
}

p, body, li {
    color: black;
}

h1, h2, h3, h4 {
    color: #01689b;
}

body {
  background-color: #FFFFFF;
}

.vitae .question-container {
  margin-bottom: 1em;
  border: none;
  background-color: #FFFFFF;
}

.vitae .navbar-default {
  background-color: #FFFFFF;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  padding: 8px;
    padding-right: 8px;
    padding-left: 8px;
  line-height: 1.42857143;
  vertical-align: middle;
  border-top: 1px solid #ddd;
}

.radio-item label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  top: 0;
  margin-left: -20px;
  border: 2px solid #01689b;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out;
  transition: border 0.15s ease-in-out;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}

.row {
  margin-right: 0px;
  margin-left:  0px;
}

ol, ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
  margin-bottom: 2px;
}