body, html {
    padding:0;
    margin:0;
    width:100%;
    font-family: 'Open Sans', sans-serif;
    font-family: Raleway,"Palatino Linotype", "Book Antiqua", Palatino, serif;
    
}

ul.ws_formlist, ul.ws_options {
    list-style-type: none;
    padding:0;
    margin:0;
}

ul.ws_formlist {
    margin-left:25px;
    margin-right:25px;
    box-shadow: 2px 2px  #e5e5e5;

}

li.ws_formitem_header, li.ws_formitem_element, li.ws_formitem_flowmenu  {
    clear:both;
    display:block;
  
    background-color: #FFFFFF;
    color:rgba(0, 0, 0, 0.8);
    

    padding-top:10px;  
    padding-left:5px;
    padding-right:5px;
    padding-bottom:10px;
    border:0px solid red;
    
   
    /*
    opacity: 0.4;
    filter: alpha(opacity=40); 
    */    
}
li.ws_formitem_element {
    margin-top:20px;
}

li.ws_active { /* , li.ws_formitems:hover */
    color:#669999;
    font-size:16px;
    /* background-color: red; */
    opacity: 100;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    font-size:150%;
}
li.ws_compact {
    color:#669999;
    font-size:16px;
    background-color: #FFFFFF;
    opacity: 100;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    padding-top:25px;
    padding-bottom:50px;
}

div.ws_question_wrapper {
    display:block; 
    overflow: hidden;
}
div.ws_question_container {
    display:block; 
    overflow: hidden;
    text-align:left;
   
}
div.ws_question_number {    
    clear:both;
    float:left;
    width:5%;
}
div.ws_question_block {
    position:relative;    
    float:left;
    width:94%;
}
div.ws_question_block_fullwidth {
    position:relative;    
    text-align:left;
    margin-left:25px;
    width:99%;    
}
div.progress {
    width:25%;
    float:right;
    margin-right:25px;
}
div.ws_question {
    clear:both;
}
div.ws_explanation {
    clear:both;
}
div.ws_input {
    clear:both;
    padding:5px;
}



.ws_button {
    display: inline-block;
    /* width: 200px; */
    /* height: 25px; */
    background: purple;
    padding: 10px;
    text-align: center;
    border:1px solid #000000;
    border-radius: 5px;
    color: white;
    text-decoration:none;
    font-weight: bold;
    margin:10px;
    box-sizing:content-box !important;
}
input.ws_submit, .ws_submit,  .ws_nav_button {
    background-color: #4CAF50; /* Green */
    background-color: #FFFFFF;
    border: none;
    border: 1px solid #e5e5e5;
    color: #000080;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size:120%;   
    height:auto;
    width:100%;
    box-sizing:border-box !important;
    border-radius:5px;
}

.ws_button:hover {
    background: #4E9CAF;
    color: #c2c2c2;

}

/* autocomplete dropdown */
	.custom-combobox {
		position: relative;
		display: inline-block;
	}
	.custom-combobox-toggle {
		position: absolute;
		top: 0;
		bottom: 0;
		margin-left: -1px;
		padding: 0;
	}
	.custom-combobox-input {
	
	}



li.ws_radio_option, li.ws_checkbox_option {
    background-color:#353535;
    padding-top:10px;
    padding-bottom:10px;
    margin-bottom:5px;
    height:30px;
}
li.ws_radio_option:hover, li.ws_checkbox_option:hover {
    background-color:#800000;
}


input.ws_single_textline {
    width:100%;
    height:40px;
    font-size:inherit;

    color:#669999;
    border:0px;
    border-bottom:1px dashed #669999;
    
}
input.ws_gap_textline {
    /* width:100%; */
    height:40px;
    font-size:inherit;

    color:#669999;
    border:0px;
    border-bottom:1px dashed #669999;
    
}
input.ws_date {
    width:auto;
}
input.ws_dropdown {
    
}
select.ws_inline_dropdown {
    display: inline-block;
    width: auto;
    height: auto;
    background: #FFFFFF;
    padding: 10px;
    text-align: center;
    border:1px solid #000000;
    border-radius: 5px;
    text-decoration:none;
    margin:10px;       
}

input.textarea {
    
}

div.ws_inline_radio_options, div.ws_inline_checkbox_options {
    display: inline;    
    height:auto;
    
}

div.ws_inline_radio_option, div.ws_inline_checkbox_option {
    display: inline-block;
    width: auto;
    height: auto;
    background: #FFFFFF;
    padding: 15px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    border:1px solid #000000;
    border-radius: 5px;
    text-decoration:none;
    font-weight: bold;
    margin:10px;    
}
div.ws_inline_radio_option_active, div.ws_inline_checkbox_option_active {
    background-color: #428bca; 
    color:#FFFFFF;
}
div.ws_inline_dropdown {
    display: inline-block;    
}

div.ws_inline_gaps {
    padding-bottom:4px;
    padding-top:4px;
    
}

    
label.inline_radio, label.inline_checkbox {
    display:inline;
    width:auto;
}
label.classic {
    padding-left:5px;
}








div.messages {

}
.msg {
    display:block;
    width:100%;
    margin-left:auto;
    margin-right:auto;    
    margin-top:0px;
    padding:15px 5px 15px 50px; 
    color: #4d4e53; 
    border-top: 1px solid;
    border-bottom: 1px solid;
    background-repeat: no-repeat;
    background-position: 5px center;    
}
.msg_warning {
    color: #9F6000;
    background-color: #FEEFB3;    
    background-image: url('../images/messages/warning.png');  
    /* background-position: left top; */
}
.msg_info {
    color: #00529B;
    background-color: #BDE5F8;   
    background-image: url('../images/messages/info.png');  
    /* background-position: left top; */
}
.msg_error {
    color: #D8000C;
    background-color: #FFBABA;    
    background-image: url('../images/messages/error.png'); 
    /* background-position: left top; */
}
.msg_success { 
    color: #4F8A10;
    background-color: #DFF2BF;    
    background-image: url('../images/messages/success.png');   
    /* background-position: left top; */
}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}



span.mouseover {
    display:none;
    
}    
p.mouseover {
    text-decoration:underline;
    display:inline;
}
p.mouseover:hover span{
    display:inline;   
    text-decoration:none;
    font-style: italic;
}   

/* ABC in radio/checkbox */
.inner_count {
    position:relative;
    top:0px;
    left:0px;
    font-size:60%;
    margin-right:30px;
    padding:2px;
    background-color:#c2c2c2;
    background-color:#FFFFFF;
    color:#000000;


    border:1px solid #000000;
}


td.matrix_radio, td.matrix_checkbox, td.scale_radio, opposite_cell, iat_cell { 
    cursor:pointer;
}
label.pointer {
    margin:0px;
    width:100%;
    height:100%;
}

td.td_textlines {
    padding-top:10px;
    padding-bottom:10px;
}

div.ws_box {
    max-width:900px;
    margin-right:auto;
    margin-left:auto;
    border:2px solid #428bca;
    margin-top:50px;    
    margin-bottom:50px;
    padding:25px;
    background-color:#FFFFFF;
    
}



span.pagemenu {
    border:1px solid #428bca;
    padding:10px;
}
span.pagemenu:hover {
    border:1px solid #000080;
    background-color:#428bca;
    color:#FFFFFF; 

}
a.pagemenu:hover {
    color:#FFFFFF;    
}
            td.scale_header, td.scale_left, td.scale_right, td.scale_radio, td.scale_radio_parent, td.scale_extra, td.scale_stars {
                border:1px solid black;
                padding:10px;
            }
            td.scale_extra {
                border:0px;
            }
            td.scale_header {
                border:0px;
            }
            td.scale_question {
                padding:2px;
            }
            
            td.scale_left {
            border-right:0px;
            }
            td.scale_right {
            border-left:0px;
            }   
            
            
            
            
div.validation_error {
     color:red;
     font-weight:bold;
}




th.rotate {
/*
    white-space: nowrap;
    -webkit-transform-origin: 60% 0%;
    -moz-transform-origin: 60% 0%;
    -o-transform-origin: 60% 0%;
    -ms-transform-origin: 60% 0%;
    transform-origin: 60% 0%;
*/
    
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(310deg);
	/*display:inline-block;*/
	/*height:30px;*/
	/*float:left;*/
	/*width:30px;*/
        
        border-bottom:1px solid #000000;
}
span.intact {
    
	display:inline-block;
	width:150px;
        margin-bottom:20px;
        
        margin-left:50px;
        border:0px solid red;
        z-index:0;
}
span.intact2 {
    
	display:inline-block;
	vertical-align:bottom;
     
        border:0px solid green;
        z-index:0;
}
tr.matrix_hover:hover {
    background-color:#ADD8E6;
    z-index:2;
}

td.td_active {
    background-color: #428bca;
}

div.examresult {
     border:1px solid #428bca;
     padding:25px;
}

.progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

.progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}