.bk-green { background: #58BE5B; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; /* Firefox */ }
h1 { font-size: 30px; text-align: center; padding: 0 10px; }

#mob-w { min-height: 500px; max-width: 600px; margin: 40px auto; }
    #mob-w > .page { display: none; }
        #mob-w > .page.show { display: block; }
.page-o { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); }

#join-registry-page { height: 100%; flex-direction: column; align-items: center; }
    #join-registry-page > h1 { margin-bottom: 0; width: 320px; padding: 0; margin: 0 auto 20px; }
    #join-registry-page > .opts { flex: 1; display: flex; flex-direction: column; width: 320px; margin: 0 auto; }
        #join-registry-page > .opts > .at-drive { border-bottom: solid 1px #BABABC; }
        #join-registry-page > .opts > .opt { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; margin: 0 20px; padding: 20px 0; }
            #join-registry-page > .opts > .opt:not(:last-child) { border-bottom: solid 1px #ccc; }
            #join-registry-page > .opts > .opt > .icon { margin-bottom: 20px; }
            #join-registry-page > .opts > .opt > .t { font-size: 22px; max-width: 225px; text-align: center; }

#join-registry-page1 > .icon-w { text-align: center; margin-bottom: 20px; }
#join-registry-page1 > .drive-list > .drive { border-top: solid 1px #aaa; padding: 15px 20px; }
#join-registry-page1 > .pre-reg-past-drive { border-top: solid 1px #aaa; display: flex; }
    #join-registry-page1 > .pre-reg-past-drive > .i { flex: 1; text-align: center; padding: 30px 10px 20px; }
        #join-registry-page1 > .pre-reg-past-drive > .i > .t { margin-top: 8px; }
    #join-registry-page1 > .pre-reg-past-drive > .pre-reg { border-right: solid 1px #aaa; }

#drive-code-page { text-align: center; padding-top: 30px; }
    #drive-code-page > .code { font-size: 24px; width: 50px; text-align: center; }
    #drive-code-page > p { font-size: 20px; }
    #drive-code-page > .number-w { position: relative; width: 50px; margin: 10px auto 0; }
        #drive-code-page > .number-w > .code { width: 100%; font-size: 16px; height: 28px; padding: 0 2px; box-sizing: border-box; }
        #drive-code-page > .number-w > .israel-prefix { position: absolute; display: none; left: 4px; top: 4px; font-size: 16px; }
        #drive-code-page > .number-w.for-israel > .code { padding-left: 22px; }
        #drive-code-page > .number-w.for-israel > .israel-prefix { display: block; }
    #drive-code-page > .info { margin: 20px 20px 0; font-weight: bold; font-size: 18px; }
    #drive-code-page > .next { margin: 20px; }
        #drive-code-page > .next:not([disabled]) { background-color: rgb(76,196,222); }
    #drive-code-page > .command { font-size: 20px; margin-top: 20px; }

.drive-list > .list { border-bottom: solid 1px #bababc; }
    .drive-list > .list > .opt { padding: 20px 20px; border-top: solid 1px #BABABC; }
        .drive-list > .list > .opt.active { background: #0099DF; color: white; border-top: none; }
            .drive-list > .list > .opt.active + .opt { border-top: none; }
.page.drive-list > .next { margin: 50px auto; display: block; }

#register-how { background: #4FA5DA; color: white; padding: 50px 20px; }
    #register-how > h2 { margin: 0; text-align: center; color: white; }
    #register-how > .select { text-align: center; font-size: 18px; }
    #register-how > .opts { display: flex; justify-content: center; margin-top: 60px; }
        #register-how > .opts > .opt { border: solid 1px white; border-radius: 20px; margin: 0 13px; width: 400px; box-sizing: border-box; text-align: center; height: 295px; padding: 20px 30px; cursor: pointer; }
            #register-how > .opts > .opt > .icon { display: flex; justify-content: center; align-items: center; height: 110px; }
            #register-how > .opts > .opt > .mail-kit { background: white; color: #FF4E00; }
                #register-how > .opts > .opt > .mail-kit.active { background: #FF4E00; color: white; }
            #register-how > .opts > .opt > .t { font-size: 21px; font-weight: bold; margin-top: 20px; margin-bottom: 25px; }
            #register-how > .opts > .opt > .evt { height: 50px; border: solid 1px #C1C1C1; border-radius: 5px; font-size: 16px; width: 100%; font-weight: 600; padding: 0 10px; }
            #register-how > .opts > .opt > .code { height: 50px; border: solid 1px #C1C1C1; border-radius: 5px; font-size: 16px; text-align: center; font-weight: 600; box-sizing: border-box; }
            #register-how > .opts > .opt.active { background: #72B7E2; }

    #register-how > .btn-w { text-align: center; margin-top: 50px; }
        #register-how > .btn-w > .btn-g { border: solid 2px white; }
        #register-how .err-msg { margin-bottom: 10px; font-size: 18px; color: #c10000; }

#stages { display: flex; justify-content: center; margin: 60px 0; }
    #stages > .stage { width: 260px; text-align: center; margin: 0 28px; }
        #stages > .stage > .icon { width: 84px; height: 84px; display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #CBEAF7; border-radius: 100px; position: relative; }
        #stages > .stage > .t { }
            #stages > .stage > .t > h3 { font-size: 28px; }
            #stages > .stage > .t > p { font-size: 18px; }
        #stages > .stage.active > .icon { background: #00BBDC; }
        #stages > .stage:not(:first-child) > .icon:before { content: ''; background: #CBEAF7; height: 5px; width: 232px; position: absolute; right: 84px; }