*{
    color: #000;
    background-color: #fff ;
    font-family: "Milo",BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size: 1em;
    font-weight: normal;
    background-color: #fff;
}
body{
    padding-left: 1em;
}
h1 { font-family: "Milo",BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;; font-size: 1.4em; color: #41474c; line-height: 1; font-weight: bold; font-style: normal; }
h2 { font-family: "Milo",BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;; font-size: 1em; color: #41474c; line-height: 1; font-weight: normal; font-style: normal; }
h3 { font-family: "Milo",BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;; font-size: 0.8em; color: #41474c; line-height: 1; font-weight: normal; font-style: normal; }

.sc-formfield-input {
    display:inline-block;
}
.Tipo3{
    display:block;
}


.textbox2{
    width: 90%;
}
.sc-formfield-input-wrapper{
    height: 50px;
}
.textbox {
    display:none;
}
.sc-formfield-input ~input[type=text]{
    width: 100%;!important
}


h2 {
    font-size: 1em;
    color: #202020;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    font-family: inherit;
}

input[type=radio] {
    opacity: 0;
    cursor: pointer;
    border: #000 ;
    width: 30px;
    
  }



   span.checkmark:after {
    content: counter(sc-formfield-input);
    color:#999;
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    text-align: center;
    font-size: 13px;
    border-radius: 50%;
    border: solid #999 1px;
    width: 40%;
    height: 100%;
    padding: 0.6em 0.6em;
    background-color:#fff;
    cursor: pointer;
}
.sc-formfield-input{

    counter-increment: sc-formfield-input;
}

label:hover span.checkmark:after{
    background-color:#fff;
    transform: translateY(-10%);
    border: solid #0077c8 1px;
    color:#0077c8;
    display: block;
    position: relative;
    transition: transform 100ms ease-in-out;
}

input:checked ~ span.checkmark:after{
    background-color: #0077c8;
    color: #fff;
    transform: translateY(-10%);
}

input[type=text]{
    display: block;
    background-color: #fff;
    width: 100%;
    border-radius: 3px;
    color: #000;
    font-size: 1em;
    font-weight: 400;
    padding: .579em 1em;
    text-decoration: none;
    transition: all .1s ease-in-out;
    cursor: text;
    border: solid #999 1px;
    text-align: left}

input[type=text]:hover{
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.15)!important;
}

.textbox .sc-formfield-label ~div{
    width: 100%;
}

span.checkmark2:after {
    color:#999;
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    text-align: center;
    font-size: 13px;
    border-radius: 50%;
    border: solid #999 1px;
    width: 40%;
    height: 100%;
    padding: 0.6em 0.6em;
    background-color:#fff;
    cursor: pointer;
}

label:hover span.checkmark2:after{
    background-color:#fff;
    transform: translateY(-10%);
    border: solid #0077c8 1px;
    color:#0077c8;
    display: block;
    position: relative;
    transition: transform 100ms ease-in-out;
}

input:checked ~ span.checkmark2:after{
    background-color: #0077c8;
    color: #fff;
    transform: translateY(-10%);
}




.Tipo2:nth-child(1) span.checkmark2:after {
    content: "0";
}
.Tipo2:nth-child(2) span.checkmark2:after {
    content: "1"}
.Tipo2:nth-child(3) span.checkmark2:after {
    content: "2"}
.Tipo2:nth-child(4) span.checkmark2:after {
    content: "3"}
.Tipo2:nth-child(5) span.checkmark2:after {
    content: "4"}
.Tipo2:nth-child(6) span.checkmark2:after {
    content: "5"}
.Tipo2:nth-child(7) span.checkmark2:after {
    content: "6"}
.Tipo2:nth-child(8) span.checkmark2:after {
    content: "7"}
.Tipo2:nth-child(9) span.checkmark2:after {
    content: "8"}
.Tipo2:nth-child(10) span.checkmark2:after {
    content: "9"}
.Tipo2:nth-child(11) span.checkmark2:after {
    content: "10"}