.state_test { 
    display: block;
    >main>section { height: 100vh; overflow: auto; 
        
        >.finish1 { background-color: #222; position: fixed; left: 0px; top: 0px; right: 0px; bottom: 50vh; z-index: -1;}
        >form { width: 340px; margin: auto; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 2px 5px 7px #11111133;
            >section>header { font-size: 30px; text-align: center;}
            main input { border: solid #ddd 1px; border-radius: 10px; line-height: 40px; }
            section>main {padding: 20px 0px; }
        }
        [type=submit] { border-radius: 10px; line-height: 40px; }
    }
}


.form122 {
    display: grid; gap: var(--gap);
    grid-template-areas: "IN1 IN1" "IN2 IN3" "IN4 IN5";
}

label {
    header { grid-area: LH;}
    main { grid-area: LM;}
    aside {grid-area: LA; }
}

.plan_pick {
    label { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "LH LA" "LM LM" "LB LB";padding: 10px; border-radius: 10px; border:solid 1px #121212; height: 120px; background-color: #eee;}
    >div { margin-bottom: 20px;}
    label header { font-size: 20px;}
    /* input[type=radio] { display: none;} */
}
.plan_pick input[type="radio"] { display: none;} 
.plan_pick input[type="radio"]:checked+label { background-color: #121212; color: #fff; box-shadow: 4px 5px 7px #11111133; opacity: 1; }
.plan_pick .terms label{ display: inline-block; border: 0px; height: 20px; background-color: transparent;}

 .state_test>main>section.welcome_step>form { background-color: #121212; color: #fff; box-shadow: 3px 8px 12px #12121233; }
 .state_test>main>.welcome_step>.finish1 { background-color: #deb512; rotate: -13deg; left: -20vw; right: -20vw; top: -40vw; } 
.welcome_01 {
    overflow: hidden; position: relative;
    text-align: center; line-height: normal;
    >header { color: #ffcc00;sub {font-size: 14px; line-height: 20px; padding: 0px 40px; margin: auto; display: block; opacity: 0.8; font-style: italic; font-weight: 100; } h2{ font-size: 40px; line-height: 40px; text-transform: uppercase;}}
    input { background: #ffcc00; color: #121212; font-weight: bold; text-transform: uppercase; border: 0px; }
    >sub  { opacity: 0.8;}
    
}
.state_test>main>.onboarding>.finish1  { background-color: #deb512; rotate: -13deg; left: -20vw; right: -20vw; top: -40vw;}
.controls_dev { display: none;}
.spin {
    height: 160px; line-height: 140px;
    animation-duration: 6s; opacity: 0.8;
    color: #ffcc00;
}