/* $activeColor: #c0392b; //red */
/* $background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/13460/dark_wall.png'); */
/* .roundedOne */
a.roundedOne {
    display:block;
}
.page-content a.roundedOne,
.page-content .roundedOne {
    width: 28px;
    height: 28px;
    position: relative;
    background-color: #78b85d;
    border-radius: 50px;
}
.page-content a.roundedOne.roundedOneBigger,
.page-content .roundedOne.roundedOneBigger {
    width: 40px;
    height: 40px;
    display:inline-block;
}
.roundedOne label {
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: absolute;
    left: 2px;
    top: 2px;
    background: white;
    border-radius: 50px;
    margin-top: 0;
}
.roundedOne.roundedOneBigger label{
    width: 34px;
    height: 34px;
    left: 3px;
    top: 3px;
}
.roundedOne label:after {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 5px;
    left: 5px;
    background: #78b85d;
    opacity: 0;
    border-radius: 50px;
}
.roundedOne.roundedOneBigger label:after {
    width: 26px;
    height: 26px;
    top: 4px;
    left: 4px;
}
.roundedOne label:hover::after {
    opacity: 0.3;
}
.roundedOne input[type=checkbox] {
    visibility: hidden;
}
.roundedOne input[type=checkbox]:checked + label:after {
    opacity: 1;
}

.green_round + strong {
    line-height: 34px;
}
.green_round {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    border:3px solid #78b85d;
    display: inline-block;
}

/* end .roundedOne */
/* .squaredTwo */
.squaredTwo {
    width: 26px;
    height: 26px;
    position: relative;
    margin: 20px auto;
    background: #78b85d;
    border-radius: 2px;
}
.squaredTwo label {
    width: 22px;
    height: 22px;
    cursor: pointer;
    position: absolute;
    left: 2px;
    top: 2px;
    background: white;
}
.squaredTwo label:after {
    content: '';
    width: 9px;
    height: 5px;
    position: absolute;
    top: 5px;
    left: 5px;
    border: 3px solid #78b85d;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    transform: rotate(-45deg);
}
.squaredTwo label:hover::after {
    opacity: 0.3;
}
.squaredTwo input[type=checkbox] {
    visibility: hidden;
}
.squaredTwo input[type=checkbox]:checked + label:after {
    opacity: 1;
}

/*
  <section title=".roundedOne">
    <!-- .roundedOne -->
    <div class="roundedOne">
      <input type="checkbox" value="None" id="roundedOne" name="check" checked />
      <label for="roundedOne"></label>
    </div>
    <!-- end .roundedOne -->
  </section>
<section title=".squaredTwo">
    <!-- .squaredTwo -->
    <div class="squaredTwo">
      <input type="checkbox" value="None" id="squaredTwo" name="check" checked />
      <label for="squaredTwo"></label>
    </div>
    <!-- end .squaredTwo -->
</section>
*/
p.questionaire_text {
    padding-top:20px;
}
.option_numbers {
    display: flex;
    justify-content: space-between;
}
a.form_number:active,
a.form_number:focus,
a.form_number:hover,
a.form_number.active {
    background-color:#78b85d;
    color: white;
}
span.form_number,span.form_number2,
a.form_number {
    border:3px #78b85d solid;
    border-radius:50%;
    color:#78b85d;
    font-weight: 600;
    font-size: 22px;
    display: inline-block;
    width: 40px;
    height:40px;
    line-height: 35px;
    text-align: center;
    /*margin-right:20px;*/
}
.form_thumb {
    width: auto;
    height:40px;
    line-height: 40px;
    color:#ccc;
    font-size:24px;
}

.numberCircle {
    border-radius: 50%;
    width: 24px;
    border: 1px solid #666;
    background-color: transparent;
    padding-right: 5px;
}

.numberSquere {
    width: 24px;
    border: 1px solid #666;
    background-color: transparent;
    padding-right: 5px;
}

.numberCircle span, .numberSquere span {
    text-align: center;
    line-height: 24px;
    display: block;
}

.numberCircle:hover, .numberSquere:hover {
    background-color: #76bf58;
}

.number {
    padding-right: 10px;
}

.page-content .active {
    background-color: #76bf58;
}

.page-content td a, .page-content td a:hover {
    text-align: center;
    line-height: 22px;
    text-decoration: none;
    display: block;
    color: #333;
    background-color: transparent;
}

.hr {
    border-bottom: 1px solid #ccc;
}
.row, .row + .row, .questionaire_help, .hr_question {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 50px;
    padding-bottom: 50px;
}
@media (max-width: 768px) {
    .row, .row + .row, .questionaire_help, .hr_question {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.row.question,
.row.question_option {
    padding-top: 0;
    padding-bottom: 0;
}
.row.question p {
    padding:0;
}

.question .green-text {
    margin:0;
    padding:0;
}

.question_option {
    margin-bottom: 30px;
}

.question p {
    margin-top: 10px;
    margin-bottom: 20px;
}

.text-help {
    margin-bottom:15px;
    text-transform: uppercase;
}
.text-help,
.question_option > .option_label {
    line-height: 40px;
    min-height:40px;
}
.text-help .form_number:first-child{
    /*margin-left: 20px;*/
}

/*.help_description > div{*/
/*display: flex;*/
/*flex-direction: row;*/
/*justify-content: space-between;*/
/*}*/
.row.help_description,
.row.help_numbers,
.help_individual{
    padding-top:0;
    padding-bottom:0;
    margin-top:15px;
}
.help_description {
    padding-top:15px;
}
.help_description > div:first-child {
    padding-right:20px;
}
.help_description > div:last-child {
    padding-left:20px;
}
.help_description > div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.option_label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 40px;
}

.judge {
    align-self: center;
}

#snippet--ajaxReq {
    padding-bottom: 260px;
}
.profile_option .roundedOne {
    margin-right:10px;
}
.profile_option:first-child {
    margin-top: 25px;
}
.profile_option {
    margin-bottom:20px;
}
@media (max-width: 479px) {
    .row.question > div:nth-child(2) {
        padding-left: 5px;
    }
    .hr_question > .question:first-child > div {
        display:inline;
    }
}
@media (max-width: 767px) {
    .option_numbers {
        margin-top:0;
    }
    .question .green-text {
        font-size: 20px;
    }
    .tech_description {
        display:none;
    }
    .row.help_numbers > div {
        display:inline-block;
        margin:0;
    }
}
@media (max-width: 1280px) {
    .judge {
        margin-top: 20px;
        align-items: flex-end;
    }
}

.email-text {
    margin-top:15px;
    color:red;
}

.valid{
    color: #76bf58;
}

h3 {
    margin-bottom: 5px;
}

/*.technology:not(:last-child()) { */
.technology {
    padding: 20px 5px 30px 5px;
}

.row.question_option {
    margin: 10px 0;
}

.row > div {
    padding-left: 0;
}

.hr {
    border-bottom: 1px solid #ccc;
}
#snippet--ajaxRequest > div:last-child .hr{
    border-bottom:none;
}

* + .btn {
    margin-top: 0;
}

.utipa, .eval_label {
    font-weight: 600;
    vertical-align: baseline;
}

.utipa {
    font-weight: 700;
    /*color: #76bf58;*/
    /*font-size: 120%;*/
}

.btn-xs {
    padding: 15px 20px;
}

.annotation {
    margin-bottom: 10px;
}

/**
* Checkbox Five
*/
.checkboxFive {
    width: 30px;
    margin: 0px 20px;
    position: relative;
}
/**
 * Create the box for the checkbox
 */
.checkboxFive label {
    cursor: pointer;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    left: 0;
    background: #efefef;
    border:1px solid #77bf59;
}
/**
 * Display the tick inside the checkbox
 */
.checkboxFive label:after {
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 10px;
    height: 6px;
    background: transparent;
    top: 11px;
    left: 9px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;

    transform: rotate(-45deg);
}

/**
 * Create the hover event of the tick
 */
.checkboxFive label:hover::after {
    opacity: 0.5;
}

/**
 * Create the checkbox state for the tick
 */
.checkboxFive input[type=checkbox]:checked + label:after {
    opacity: 1;
}

@media (max-width: 769px) {
    .checkboxFive label span {
        padding-left: 40px;
    }
}
@media (min-width: 769px) {
    .checkboxFive label span {
        padding-left: 40px;
    }
}