*{
    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;
}


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


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

h1{
    font-family: "Milo",BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size: 1.2em;
    color: #41474c;
    line-height: 1.4;
    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.4;
    font-weight: normal;
    font-style: normal;
}
    h3, input[type=checkbox]{
        font-family: "Milo",BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
        font-size: 0.9em;
        color: #41474c;
        line-height: 1.4;
        font-weight: normal;
        font-style: normal;
    }

input[type=radio] {
    opacity: 0;
    cursor: pointer;
    border: #000 ;
    width: 30px;
    
  }
.Counter{
    width: 2em;
    height: 1.1em;
}


   span.checkmark:after {
    content: counter(sc-formfield-input);
    color:#999;
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    text-align: center;
    font-size: 10px;
    border-radius: 50%;
    border: solid #999 1px;
    width: 58%;
    height: 100%;
    padding: 0.65em 0.75em;
    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: 10px;
    border-radius: 50%;
    border: solid #999 1px;
    width: 56%;
    height: 100%;
    padding: 0.95em 0.55em;
    background-color:#fff;
    cursor: pointer;
}
body{
    padding-left: 1em;
}

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"}



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

    
    label:hover span.checkmark3: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.checkmark3:after{
        background-color: #0077c8;
        color: #fff;
        transform: translateY(-10%);
    }
    
    
    
    
    .Counter:nth-child(1) span.checkmark3:after {
        content: "1";
    }
    .Counter:nth-child(2) span.checkmark3:after {
        content: "2"}
    .Counter:nth-child(3) span.checkmark3:after {
        content: "3"}
    .Counter:nth-child(4) span.checkmark3:after {
        content: "4"}
    .Counter:nth-child(5) span.checkmark3:after {
        content: "5"}
    .Counter:nth-child(6) span.checkmark3:after {
        content: "6"}
    .Counter:nth-child(7) span.checkmark3:after {
        content: "7"}
    .Counter:nth-child(8) span.checkmark3:after {
        content: "N/A";  
    }

    @media only screen and (max-width: 600px) {
        .Tipo2{
            width:5%;
            padding: 0 5px;;
        }
        span.checkmark2:after {
            width: 90%;
            height: 100%;
            padding: 0.85em 0.55em;

        }
        .Counter{
            width:8%;
            padding: 0 2px;
        }

        span.checkmark3:after {
            width: 65%;
            height: 100%;
            padding: 0.8em 0.6em;

        }


      }