/*form styles*/
#msform {
    /*text-align: center;*/
    position: relative;
    margin-top: 30px;
}
.csf-main
{
    padding: 50px 0;
    display: block;

}
.csf-questions {
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1);
/*    padding: 20px 30px;*/
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
    /*stacking fieldsets above each other*/
    position: relative;
	background: hsla(186, 33%, 94%, 1);
    background: linear-gradient(90deg, hsla(186, 33%, 94%, 1) 0%, hsla(216, 41%, 79%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(186, 33%, 94%, 1) 0%, hsla(216, 41%, 79%, 1) 100%);
    background: -webkit-linear-gradient(260deg, hsla(186, 33%, 94%, 1) 0%, hsla(216, 41%, 79%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#EBF4F5", endColorstr="#B5C6E0", GradientType=1 );
}

/*.success-box{
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1);
    padding: 40px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 5% 20%;
}*/

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}
#msform fieldset {
    padding: 25px;
}
/*inputs*/
#msform input, #msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 10px;
    /*width: 100%;*/
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 18px;
}

/* #msform input:focus, #msform textarea:focus {
     -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #ee0979;
    outline-width: 0;
    transition: All 0.5s ease-in;
    -webkit-transition: All 0.5s ease-in;
    -moz-transition: All 0.5s ease-in;
    -o-transition: All 0.5s ease-in; 
} */

/*buttons*/
#msform .action-button {
    width: 100px;
    background: #fbba00;
    font-weight: bold;
    color: #3c3c3b;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
	text-shadow: none;
    font-size: .875rem !important;
}
#msform .action-button img, #update_score img,.action-button img{
    width: 17px;
    display: none;
}


/* #msform .action-button:hover, #msform .action-button:focus {
     box-shadow: 0 0 0 2px white, 0 0 0 3px #fbba00; 
} */

.next-button {
    width: 100px !important;
    background: #fbba00;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

.next-button:hover{
    box-shadow: 0 0 0 2px white, 0 0 0 3px #fbba00;
}

#msform .action-button-previous {
    width: 100px;
    background: #C5C5F1;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

#msform .action-button-previous:hover, #msform .action-button-previous:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1;
}

/*headings*/
.fs-title {
    font-size: 18px;
    color: black;
    margin-bottom: 10px;
/*     letter-spacing: 2px; */
/*     font-weight: bold; */
}

.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}


/* Not relevant to this form */
.dme_link {
    margin-top: 30px;
    text-align: center;
}
.dme_link a {
    background: #FFF;
    font-weight: bold;
    color: #ee0979;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 5px 25px;
    font-size: 12px;
}

.dme_link a:hover, .dme_link a:focus {
    background: #C5C5F1;
    text-decoration: none;
}

.recommendation span{
    font-size: 20px;
}

.recommendation{
    display: none;
    margin: 20px 0px 20px 0px;
}

.alobrate-ans span{
    font-size: 20px;
}

.alobrate-ans{
    display: none;
    margin: 20px 0px 20px 0px;
}
.alobrate-ans label{
    width: 100%;
}

.alobrate-ans textarea{
    width:100%; border: 2px solid #f5a742;
}

.quetions-box{
    margin-left: 10%;
}

.font-20{
    font-size: 20px;
    text-transform: uppercase;
}

.dot {
  height: 25px;
  width: 25px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}

.bg-green{
    background-color: green;
}

.bg-yellow{
    background-color: #fbba00;
}

.bg-red{
    background-color: red;
}

.score-color{
    display: none;
}

.column1 {
  float: left;
  width: 70%;
}

.column2 {
  float: left;
  width: 30%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.uploadbox{
    margin-top: 20px !important;
}

.uploadtext{
    font-size: 18px;
}

.title-link{
    color: blue;
    font-size: 18px;
}

.title-link:hover{
    color: black;
}

.error-msg{
    color: red;
    display: none;
    font-size: 15px;
}

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
    background-color: #005a77;
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

.styled-table tbody tr:hover{
       color: #005a77;
    text-decoration: none;
}

.quetion-colunm{
    width: 40%;
}

.last-slide{
    display: none;
}
.progress_wrap
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #005a77;
    padding: 20px 0;
    color: #fff;
}
.progressbar{
    border: 2px solid #fbba00;
    /* width: 80%; */
    min-width: 300px;
    /* margin: 0 auto; */
/*    margin-bottom: 20px;*/
    height: 13px;
    border-radius: 10px;
}

.progress2{
    border: 2px solid #fbba00;
    width: 0%;
    height: 10px;
    background-color: #fbba00;
/*     border-radius: 10px; */
}

.progress-value{
   margin-right: 10px;
}

.select-option{
    color: red;
    font-size: 13px;
    display: none;
}

.fw-option{
    font-weight: 100;
    margin-right: 10px;
}

.checkbox-input{
    width: 20px !important;
    height: 50px;
}

.options-box{
    width: 12%;
    float: left;
}

.options-main-box:after {
  content: "";
  display: table;
  clear: both;
}

.previous{
    display: none;
}


.radio-wrapper{
  /* display: inline-flex; */
    width: 100%;
    align-items: center;
}
/* Customize the label (the container) */
.option {
  display: block;
  line-height: 27px;
  margin: 14px 18px 14px 0px;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: transparent;
    border: solid 1px #000;
    border-radius: 50%;
}

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

/* When the checkbox is checked, add a blue background */
.option input[type="radio"]:checked ~ .checkmark {
  background-color: #000000;
  display: block;
}

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


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

.csf-suvery-result
{
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1);
    /* padding: 20px 30px; */
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
}
.row.item{
    padding: 25px;
    text-align: center;
}
.csf-suvery-result .row.item:not(:first-of-type) {
    display: none;
}
.csf-suvery-result .action-button {
    width: 100px;
    background: #fbba00;
    font-weight: bold;
    color: #3c3c3b;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#data-label {
  font-size: 20px;
  position: absolute;
}
.res-chart
{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.res-chart canvas{
	pointer-events:none;
}
.csf-questions label, .que_options label{
    font-weight: 300;
    font-size: 15px !important;
}
.csf-questions .recommendation label {
    font-weight: 700;
}
.csf-questions .frameworks label {
    font-size: 16px !important;
    width: 100%;
    display: block;
}
.frameworks span.checkmark {
    height: 20px;
    width: 20px;
}
.csf-questions .btn-csf {
    display: flex;
}
.btn-success {
    background-color: #fbba00;
    border-color: #fbba00;
}

.btn-danger {
    background-color: red;
    border-color: red;
}