/******************
    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
*/
 @media (min-width: 778px){
    .navbar.navbar-default.navbar-fixed-top {
     padding-left: calc(( 100vw - 750px ) / 2 - 15px);
     padding-right: calc(( 100vw - 750px ) / 2);
    }
}

@media (min-width: 992px){
    .navbar.navbar-default.navbar-fixed-top {
     padding-left: calc(( 100vw - 970px ) / 2 - 15px);
     padding-right: calc(( 100vw - 970px ) / 2);
    }
}

@media (min-width: 1200px){
    .navbar.navbar-default.navbar-fixed-top {
     padding-left: calc(( 100vw - 1170px ) / 2 - 15px);
     padding-right: calc(( 100vw - 1170px ) / 2);
    }
}
 .navbar.navbar-default.navbar-fixed-top {
     background-color:black;
 }
 
.bg-primary{
    background-color:transparent;
    color:black;
}
.btn-primary{
    background-color:black;
    border-width:0;
    height: 30px;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
    line-height: 0;
}
.btn-primary:hover{
    background-color:#7f7f7f;
    border-width:0;
}

.btn-primary.active, .btn-primary.active.focus{
    background-color:#ffda00;
    border-width:0;
}

.btn-default{
    background-color:#000000;
    border-width:0;
}

.btn-default:hover{
    background-color:#7f7f7f;
    border-width:0;
}

.text-info, .text-info:hover{
    color: black;
    text-align: left;
} 

.question-valid-container>.text-info{
    color:#dddddd;
    text-align: left;
}

.asterisk,
.input-error .asterisk {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 8px;
    vertical-align: top;
    margin-left: 6px;
    margin-top: 0;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.question-title-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding-top: 30px;
    padding-bottom: 5px;
}

.ls-questionhelp, .ls-questionhelp:hover{
    color:rgb(52, 133, 154);
    margin-top: 10px;
}

.save-message>.text-info, .save-message>.text-info:hover, .well>.text-info, .well>.text-info:hover{
    color:rgb(44, 62, 80);
}

.progress, .progress-bar {
    height:20px;
    border-radius: 10px;
}

.progress-bar {
    background-color: black;
}

@media (min-width: 778px){
    .top-container {
    width: 750px;
    }
}

@media (min-width: 992px){
    .top-container {
    width: 970px;
    }
}

@media (min-width: 1200px){
    .top-container {
    width: 1170px;
    }
}

.top-container {
    margin-top: 50px !important;
    margin-bottom:30px !important;
    margin-left: auto;
    margin-right:auto;
}

.alert-warning {
    background-color: #ffda00;
    border-color:transparent;
    font-weight: bold;
}

.survey-name{
    color:black;
    font-size:32px;
    font-weight: bold;
    text-transform:uppercase;
    margin: 50px 0 30px;
}

.survey-description{
    margin-bottom:50px;
}

a:hover, a:focus{
    color:#5D6D7E !important;
}

a {
    color:blue;
}

.space-col{
    margin-bottom:1em;
}

.question-container, .answer-container, .question-help-container {
    border-width:0px;
}

.answer-container, .question-valid-container, .question-help-container{
    margin-left:20px;
}

.answer-container{
    padding: 0 15px;
}

.question-container{
    margin-bottom:0px;
}

.ls-answers{
    padding:0;
}

.form-control.numeric{
    width:300px;
}

.group-title{
    color:black;
    font-weight: bold;
    text-transform:uppercase;
    text-align:left;
    margin: 0 0 20px 0;
}

.btn-lg, .btn-group-lg >.btn {
    padding: 20px 30px;
    font-size: 18px;
    line-height: 0;
}

.fa.fa-check, .fa.fa-ban{
    display:none;
}

.surveytitle.btn{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

li.checkbox-item {
    margin-bottom: 5px;
}

@media (min-width: 768px) {
    .form-horizontal .control-label{
  text-align: initial;
  margin-bottom:0;
  padding-top:0;
}
}

.flatly label::after {
    background-color: #000000;
}

.checkbox-item label::after {
    color: white;
}