/*
    this CSS contains the formatting options for the question grid question type
*/
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); /* Including font awesome star styling */ 

.dbsGridQuestionContainer { 
	align-items: center;
}

.dbsGridQuestion {
	min-height: 30px ;
	min-width: 60px ;
	font-weight: 600 ;
}

.dbsRating {
	margin-top: 15px ;
	display: grid ;
	grid-template-columns: 45% 55% ;
}
	
.dbsGridResponse {
	min-height: 45px ;
	max-width: 450px ;
	text-align: right ;
	display: inline-flex ;
    flex-direction: row-reverse ; 
	font-size: 1.75em ;
}
.dbsGridResponse > input {
    display: none ;
} 

.dbsGridResponse > label:before { 
    font-size: 1em ;
    margin-left: 10px ;
    font-family: FontAwesome ;
    display: inline-block ;
    content: "\f111" ; 
}

.dbsGridResponse > label { 
    float: right ;
	  color: transparent ;
   -webkit-text-stroke-width: 2px ;
   -webkit-text-stroke-color: var(--dbsBlack) ; 
}
  
/***** CSS Magic to Highlight Stars on Hover *****/

.dbsGridResponse > input:checked ~ label {
    color: black ;
} /* hover previous stars in list */

.dbsGridResponse > input:checked + label:hover, /* hover current star when changing rating */
.dbsGridResponse > input:checked ~ label:hover,
.dbsGridResponse > label:hover ~ input:checked ~ label, /* lighten current selection */
.dbsGridResponse > input:checked ~ label:hover ~ label, /* show gold star when clicked */
.dbsGridResponse:not(:checked) > label:hover, /* hover current star */
.dbsGridResponse:not(:checked) > label:hover ~ label {
    color: grey ;
}


.dbsGridNumbers {
	float: right ;
}

.dbsGridOption {
	margin-left: 5px ;
	height: 20px ;
	width: 20px ;
}

.dbsOptionHidden {
	display: none ;
}

.dbsGridNum {
	margin-left: 9px;
	margin-right: 10px;
}

/*Responsive Styles*/
@media screen and (max-width: 980px) {
    .dbsGridOption {
		height: 26px ;
		width: 26px ;	
    }
}