.srv-error-msg-text
{
	color: red;
}
.srv-prog-pos
{
	border: 0 none;
	padding: 0;
	border-spacing: 0;
	width: 98%;
	margin-left: 1%;
	margin-right: 1%;
}
.srv-prog-cont
{
	border: 0 none;
	padding: 0;
	border-spacing: 0;
}
.srv-prog-bar
{
  position: relative;
  border: 1px solid black;
  background-color: white;
  height: 20px;
  width: 250px;
  text-align: center;
}
.srv-prog-bar .srv-prog-ind
{
  position: absolute; 
  top: 0; 
  left: 0;
  background-color:green;
  height: 100%;
  margin: 0;
}
.srvProgressBar .srv-prog-pct
{
	position: relative;
    text-align: center;
	vertical-align: middle;
    color: black;
}
.srv-prog-txt
{
    line-height: 20px;
	vertical-align: middle;
	position: relative;
}
.srv-prog-ext-txt
{
	color: black;
}

.srv-q-option-text:hover {
	background-color: lightgrey;
}



/* variable size checkbox */
.srv-rcb {
	width: 1.25em;
	height: 1.25em;
}

.srv-rcb.sm {
	width: .75em;
	height: .75em;
}

.srv-rcb.med {
	width: .875em;
	height: .875em;
}
.srv-rcb.lrg {
	width: 1.25em;
	height: 1.25em;
}

.srv-rcb.xlrg {
	width: 1.55em;
	height: 1.55em;
}

.srv-rcb.x2 {
	width: 2em;
	height: 2em;
}
.srv-rcb.x3 {
	width: 3em;
	height: 3em;
}
.srv-rcb.x4 {
	width: 4em;
	height: 4em;
}

.srv-rcb .container {
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.srv-rcb .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.srv-rcb .container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: white;
    border: 1px solid black;
}

/* On mouse-over, add a grey background color */
.srv-rcb .container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* Create the checkmark/indicator (hidden when not checked) */
.srv-rcb .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.srv-rcb .container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.srv-rcb .container .checkmark:after {
    left: 35%;
    top: 15%;
    width: 20%;
    height: 45%;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* END variable size checkbox */

/* variable size radio */
.srv-rrb {
	width: 1.25em;
	height: 1.25em;
}

.srv-rrb.sm {
	width: .75em;
	height: .75em;
}

.srv-rrb.med {
	width: .875em;
	height: .875em;
}
.srv-rrb.lrg {
	width: 1.25em;
	height: 1.25em;
}

.srv-rrb.xlrg {
	width: 1.55em;
	height: 1.55em;
}

.srv-rrb.x2 {
	width: 2em;
	height: 2em;
}
.srv-rrb.x3 {
	width: 3em;
	height: 3em;
}
.srv-rrb.x4 {
	width: 4em;
	height: 4em;
}

.srv-rrb .container {
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.srv-rrb .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.srv-rrb .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: silver;
    border: 2px solid grey;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.srv-rrb .container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.srv-rrb .container input:checked ~ .checkmark {
    background-color: silver;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.srv-rrb .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.srv-rrb .container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.srv-rrb .container .checkmark:after {
 	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	border-radius: 50%;
	background: black;
}

/* When the radio button is checked, highlight label */
.srv-rrb .container input:checked + label {
   background-color: #red;
}
/* END variable size radio */

/* Used to align  text and input for Other Text */
.tc-alignhorizontal {
    display: flex;
/*    justify-content: center;*/
    align-items: center;
}

.srv-matrix-table  {
   border-collapse: collapse;
   width: 100%;
}
.srv-matrix-table > tbody > tr > td {
   border: 1px solid black;
   padding: 2px;
}
.srv-matrix-table > tbody > tr > th {
   border: 1px solid black;
   padding: 2px;
}

.srv-q-opt-cont {padding-left: 2px;}