html, body {
      min-height: 100%;
      }
      body, div, .formDesign, input, p { 
      padding: 0;
      margin: 0;
      outline: none;
      font-family: Roboto, Arial, sans-serif;
      font-size: 14px;
      
      line-height: 22px;
      }
      h1 {
      font-weight: 400;
      }
      .testbox {
      display: flex;
      justify-content: center;
      align-items: center;
      height: inherit;
      padding: 3px;
      }
      .formDesign {
  
      padding: 20px;
      background: #fff;
      box-shadow: 0 2px 5px #ccc; 
      }
      input {
      width: calc(100% - 10px);
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
      vertical-align: middle;
      }
      input:hover, textarea:hover {
      outline: none;
      border: 1px solid #095484;
      }
      th, td {
      
      padding: 15px 0;
      border-bottom: 1px solid #ccc;
    
      vertical-align: unset;
      line-height: 18px;
      font-weight: 400;
      word-break: break-all;
      }
      .first-col {
       width: 50%;
      text-align: left;
      }
      textarea:hover {
      outline: none;
      border: 1px solid #1c87c9;
      }
      table {
      width: 100%;
      }
      textarea {
      width: calc(100% - 6px);
      }
      .question {
		  font-size: 14px;
			margin-top:10px !important;
			padding: 15px 0 5px;
			/*color: #095484;*/
			color: #000;
			display: contents !important;
      }
      .question-answer label {
      display: block;
     
      }
      .question-answer input {
      width: auto;
      }
	  
	.question-answerss label {
      display: block;
     
      }
      .question-answerss input {
      width: auto;
      }
	  
      .btn-block {
      margin-top: 20px;
      text-align: center;
      }
      button {
      width: 150px;
      padding: 10px;
      border: none;
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
      background-color: #095484;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      }
      button:hover {
      background-color: #0666a3;
      }
      @media (min-width: 568px) {
      th, td {
      word-break: keep-all;
      }
      }

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
	width:100%;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}


* Rating Star Widgets Style */
.rating-stars ul {
  list-style-type:none;
  padding:0;
  
  -moz-user-select:none;
  -webkit-user-select:none;
}
.rating-stars ul > li.star {
  display:inline-block;
  
}

/* Idle State of the stars */
.rating-stars ul > li.star > i.fa {
  font-size:2.0em; /* Change the size of the stars */
  color:#ccc; /* Color on idle state */
}

/* Hover state of the stars */
.rating-stars ul > li.star.hover > i.fa {
  color:#FFCC36;
}

/* Selected state of the stars */
.rating-stars ul > li.star.selected > i.fa {
  color:#FF912C;
}


.btn-submit{
  display: block;
  width: 100%;
  padding: 0.5rem;
  font-size: 20px;
  background-color: #0275d8;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}


.feedback {
  float: left;
  width: 100%;
  min-height: 75px;
  outline: none;
  resize: none;
  border: 1px solid grey;
}


.rating-stars ul{
  margin-left:10rem
}

.modal-header{
  font-size: 20px;
  font-weight: 200;
}

/* starModal ends */
.error {
	color: #D8000C;
	
}

.testbox{
	height:80%;
	width:100%;
	
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin: auto;
  
  
  position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    color:darkred;
  
  
} 
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

dis-content{
	display: contents !important;
}



overflow-auto{
	overflow: auto !important;
}



span.scale-rating{
margin: 5px 0 15px;
    display: inline-block;
   
    width: 100%;
   
}
span.scale-rating>label {
  position:relative;
    -webkit-appearance: none;
  outline:0 !important;
    border: 1px solid grey;
    height:33px;
    margin: 0 5px 0 0;
  width: calc(10% - 7px);
    float: left;
  cursor:pointer;
}


span.scale-rating label {
  position:relative;
    -webkit-appearance: none;
  outline:0 !important;
    height:33px;
      
    margin: 0 5px 0 0;
  width: calc(10% - 7px);
    float: left;
  cursor:pointer;
}


span.scale-rating input[type=radio] {
  position:absolute;
    -webkit-appearance: none;
  opacity:0;
  outline:0 !important;
    /*border-right: 1px solid grey;*/
    height:33px;
 
    margin: 0 5px 0 0;
  
  width: 100%;
    float: left;
  cursor:pointer;
  z-index:3;
}
span.scale-rating label:hover{
background:#54b3d7;
}
span.scale-rating input[type=radio]:last-child{
border-right:0;
}
span.scale-rating label input[type=radio]:checked ~ label{
    -webkit-appearance: none;
    margin: 0;
  background:#54b3d7;
}
span.scale-rating label:before
{
  content:attr(value);
    top: 7px;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    vertical-align: middle;
  z-index:2;
}


.survey-hr{
  margin:10px 0;
  border: .5px solid #ddd;
}



.question-answer ul {
  column-count: 3;
  column-gap: 1rem;
  list-style: none;
}

.question-answer ul li {
	margin: 0px !important;
}

.question-answers ul {
  column-count: 3;
  column-gap: 1rem;
  list-style: none;
}


.question-answerss ul li {
	margin: 0px !important;
}
/* ADDITIONAL STYLING */

/* The container */
.datavalue {
	
  display: block;
  font-family: Montserrat;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.datavalue input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0px;
 /* transform: translateY(-50%); */
  left: 10px;
  height: 20px;
  width: 20px;
  border: 1px solid #006fa0;
}


/* When the checkbox is checked, add a blue background */
.datavalue input:checked ~ .checkmark {
  background-color: #006fa0;
}

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

/* Show the checkmark when checked */
.datavalue input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.datavalue .checkmark:after {
  position: relative;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}


@media (min-width: 1200px)
.container {
    width: auto ! important; 
}


@media (min-width: 992px)
.container {
    width: auto ! important; 
}


@media (min-width: 768px)
.container {
     width: auto ! important;
}
.container{
padding-left: 29px ! important;
}

.ml-16{
	margin-left: 16px;
}

/* if desktop */
    .mobile_device_380px {
        display: none;
    }
    .mobile_device_480px {
        display: none;
    }


    /* if mobile device max width 380px */
    @media only screen and (max-device-width: 380px) {
        .mobile_device_380px{display: block;}     
				
        .desktop {display: none;}
    } 

    /* if mobile device max width 480px */
    @media only screen and (max-device-width: 480px) {
       .mobile_device_480px{display: block;margin-left: 16px;}
       .desktop {display: none;}
    }


.question-answerss label{
	font-size: 12px !important;
	font-weight: 400;
	font-family: Roboto, Arial, sans-serif !important;
	color:black ! important;

}
.question-answer .row{
	/* padding-left: 23px !important; */
	margin-left: 10px !important;
}

.textArea-style{
	background:#fff !important;
	height: 94px;resize: none;
	border: 1px solid #006fa0b3 !important;
	color:black !important;
	padding:10px !important;
}

.question-answer .row .col-4{
	width: 100%;
	column-count: 3;
}


.question-answer label{
	color:black ! important;
	font-size: 12px !important;
	font-weight: 400  !important;
	font-family: Roboto, Arial, sans-serif !important;
	/* margin-left: 6px !important; */
}


.box-body .br-widget a{
	border: 2px solid #006fa085 !important;
	color: #006fa085 !important;
}

.br-theme-bars-square .br-widget a.br-active, .br-theme-bars-square .br-widget a.br-selected{
	border: 2px solid #006fa0 !important;
	background-color: #006fa0 !important;
	color: #fff !important;
}

.box-body{
	/* padding: 12px !important; */
	margin-top: -16px !important;
	margin-left: 16px !important;
}

/*shows the stars side by side, centered, and in reverse order than the HMTL*/
.rating {
	/* padding: 12px !important; */
	margin-left: 16px !important;
	margin-top: -10px !important;
  display: flex;
  flex-direction: row-reverse;
  justify-content: left;
}

/*hides the radio buttons*/
.rating > input{ display:none;}

/*style the empty stars, sets position:relative as base for pseudo-elements*/
.rating > label {
  position: relative;
  width: 1.1em;
  font-size: 35px;
  color:#006fa0 !important;
  cursor: pointer;
}

/* sets filled star pseudo-elements */
.rating > label::before{ 
  content: "\2605";
  position: absolute;
  opacity: 0;
}
/*overlays a filled start character to the hovered element and all previous siblings*/
.rating > label:hover:before,
.rating > label:hover ~ label:before {
  opacity: 1 !important;
}

/*overlays a filled start character on the selected element and all previous siblings*/
.rating > input:checked ~ label:before{
  opacity:1;
}

/*when an element is selected and pointer re-enters the rating container, selected rate and siblings get semi transparent, as reminder of current selection*/
.rating:hover > input:checked ~ label:before{ opacity: 0.4; }

/*just aesthetics*/
body{ background: #222225; color: white;}
h1, p{ text-align: center;}
p{ font-size: 1.2rem;}
@media only screen and (max-width: 600px) {
  h1{font-size: 14px;}
  p{font-size: 3px;}
}





.br-theme-bars-square .br-widget {
  height: 15px;
  white-space: nowrap;
}
.br-theme-bars-square .br-widget a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  border: 2px solid #bbcefb;
  background-color: white;
  margin: 2px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  text-align: center;
  color: #bbcefb;
  font-weight: 600;
}
.br-theme-bars-square .br-widget a.br-active,
.br-theme-bars-square .br-widget a.br-selected {
  border: 2px solid #4278F5;
  color: #4278F5;
}
.br-theme-bars-square .br-widget .br-current-rating {
  clear: both;
  width: 330px;
  text-align: center;
  font-weight: 600;
  display: block;
  padding: .5em 0;
  color: #646464;
}
.br-theme-bars-square .br-readonly a {
  cursor: default;
}
.br-theme-bars-square .br-readonly a.br-active,
.br-theme-bars-square .br-readonly a.br-selected {
  border: 2px solid #729bf8;
  color: #729bf8;
}
@media print {
  .br-theme-bars-square .br-widget a {
    border: 2px solid #b3b3b3;
    color: #b3b3b3;
  }
  .br-theme-bars-square .br-widget a.br-active,
  .br-theme-bars-square .br-widget a.br-selected {
    border: 2px solid black;
    color: black;
  }
}

.page-header
{
	margin-top:0px !important;
}

.menu.menu--primary ul li a:hover
{
	text-decoration: none !important;
}

.invalidUrlStyle{
	   align:center;
	   min-height: calc(100vh - 230px);
}

@media only screen and (max-device-width: 380px) {
	.invalidUrlStyle{
		 min-height: calc(100vh - 280px);
	}   
} 

@media only screen and (max-device-width: 480px) {
   .invalidUrlStyle{
	   min-height: calc(100vh - 280px);
   }
}