/*
    this CSS contains the core formatting options for the basic survey controls
*/
p,h1,h2,h3,h4,h5 {
    font-family: Helvetica, serif ;
}

.dbsSurvey {
    border: 2px var(--dbsBlack) solid ;
    border-radius: 5px ;
    margin: 15px ;
    padding-top: 10px ;
    padding-left: 10px ;
    padding-right: 10px ;
    padding-bottom: 10px ;
}

.dbsRequired {
    color: red ;
}

.dbsQuestionGroup {
    
}

.dbsQuestion {
    margin-top: 20px ;
    margin-bottom: 20px ;
    border: 1px var(--dbsBlack) solid ;
    border-radius: 3px ;
    border-spacing:10px ;
    padding: 10px ;
    font-family: helvetica ;
    background: var(--dbsWhite) ;
}

.dbsQuestionLabel {
    margin-top: 5px ;
    text-align: left ;
    font-weight: 600 ;
}

.dbsHint {
    position: relative;
    display: inline-block;
    height: 20px ;
    width: 20px ;
    margin-left: .5em ;
    background-image: url("/images/hint.svg") ; 
  }
  
  .dbsHint .dbsHint-Text {
    visibility: hidden; 
    width: 200px;
    background-color: var(--dbsBlack);
    color: var(--dbsWhite);
    text-align: center;
    margin-left: .5em ;
    border-radius: 3px;
    padding: 1em ;
    position: absolute;
    z-index: 1; 
  } 
  
  .dbsHint:hover .dbsHint-Text {
    visibility: visible ;  
  }
 
.dbsButton {
    height: 50px ;
    min-width: 200px ;
}

.dbsProgress {
    height:30px ;
    width: 100% ;
}
/*Responsive Styles*/
@media screen and (max-width: 980px) {
    .dbsSurvey {
        margin: 0;
        padding-top: 5px ;
        padding-left: 5px ;
        padding-right: 5px ;
        padding-bottom: 5px ;
        font-size: 1.5em ;
    }

    .dbsQuestion {
        margin-top: 10px ;
        margin-bottom: 10px ;
        padding: 5px ;
    }
}