/* @extend display-flex; */ display-flex, .form-group, .form-select, .form-radio, .form-textarea, .form-date, .form-radio-item, .form-flex, .form-date-item .select-icon, .form-date-item .select-icon i, #val, #button, .steps ul, .actions ul, .actions ul li a, .title, .number { display: flex; display: -webkit-flex; } .registerBox { width: 100%; position: relative; margin: 0 auto; background: #fff; box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.1); -o-box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.1); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; margin-top: 4rem; margin-bottom: 4rem; } .registerBox h2 { padding:30px; } .signup-form { padding: 0 20px; position: relative; } form .form-group { margin-bottom: 0px; } .form-group, .form-select, .form-radio, .form-textarea, .form-date { align-items: center; -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; -ms-align-items: center; margin-bottom: 30px; position: relative; } label { display: inline-block; width: 155px; text-align: right; margin-right: 27px; } label.error { position: absolute; /* right: 92px;*/ /* display: block; */ font-size: 11px; color: #ff0000; width: 100%;} label.error i { font-size: 12px; } input.error { border: 1px solid #ff0000; } textarea.error { border: 1px solid #ff0000; } /*select.error { border: 1px solid #ff0000; }*/ input, select, textarea { box-sizing: border-box; background: #FFFFDF; padding: 9px 10px; border: 1px solid #ba729b; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; display: block; width: 345px; } /* input:focus, select:focus, textarea:focus { background: none; } input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; font-weight: 400; } input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder { color: #999; font-weight: 400; } input:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999; font-weight: 400; } input:-moz-placeholder, select:-moz-placeholder, textarea:-moz-placeholder { color: #999; font-weight: 400; } select { color: #999; font-weight: 400; } .form-textarea textarea { height: 150px; width: 534px; } .form-radio { margin-bottom: 40px; } .form-radio-item input { width: 0; height: 0; position: absolute; left: -9999px; } .form-radio-item input + label { margin: 0px; padding: 12px 10px; width: 85px; height: 50px; box-sizing: border-box; position: relative; display: inline-block; text-align: center; background-color: #f8f8f8; font-size: 14px; font-weight: 400; color: #f8f8f8; text-align: center; text-transform: none; transition: border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; } .form-radio-item input:checked + label { background-color: #1abc9c; color: #FFF; z-index: 1; } .form-radio-item input:focus + label { outline: none; } .form-radio-item input:hover { background-color: #1abc9c; color: #FFF; } .form-radio-item input + label:first-of-type { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -o-border-radius: 5px 0 0 5px; -ms-border-radius: 5px 0 0 5px; border-right: none; } .form-radio-item input + label:last-of-type { border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -o-border-radius: 0 5px 5px 0; -ms-border-radius: 0 5px 5px 0; border-left: none; } .form-radio-flex input { width: 0; height: 0; position: absolute; left: -9999px; } .form-radio-flex input + label { margin: 0px; padding: 12px 10px; width: 86px; height: 50px; box-sizing: border-box; position: relative; display: inline-block; text-align: center; background-color: transparent; border: 1px solid #ebebeb; text-align: center; text-transform: none; transition: border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; } .form-radio-flex input:checked + label { border: 1px solid #1abc9c; z-index: 1; } .form-radio-flex input:focus + label { outline: none; } .form-radio-flex input:hover { border: 1px solid #1abc9c; }*/ #signup-form-p-2 .form-radio-flex, #signup-form-p-2 .form-flex, #signup-form-p-2 .form-group input { width: 465px; } #signup-form-p-1 .form-group input { width: 429px; } #signup-form-p-2 #credit_card { width: 275px; } #signup-form-p-2 #cvc { width: 143px; } .form-row { padding-left: 80px; } .form-row .form-group label { width: auto; } .form-row .form-group:first-child { float: left; } .form-row .form-group:last-child { float: right; } /*.form-date { clear: both; } .form-date-item { position: relative; overflow: hidden; } .form-date-item:last-child:after { width: 0px; } .form-date-item select { position: relative; background: 0 0; z-index: 10; cursor: pointer; margin-right: 10px; } .form-date-item #expiry_date { width: 86px; } .form-date-item #expiry_year { width: 104px; } .form-date-item .select-icon { z-index: 0; position: absolute; top: 0; right: 10px; bottom: 0; justify-content: center; -moz-justify-content: center; -webkit-justify-content: center; -o-justify-content: center; -ms-justify-content: center; align-items: center; -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; -ms-align-items: center; } .form-date-item .select-icon i { justify-content: center; -moz-justify-content: center; -webkit-justify-content: center; -o-justify-content: center; -ms-justify-content: center; align-items: center; -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; -ms-align-items: center; width: 30px; height: 20px; font-size: 22px; color: #999; } .custom-file-input::-webkit-file-upload-button { visibility: hidden; } input[type='file'] { height: 50px; opacity: 0; }*/ #val { width: 345px; height: 50px; position: absolute; top: 0; left: 0; font-size: 14px; font-weight: bold; pointer-events: none; border: 1px solid #ebebeb; font-family: 'Roboto Slab'; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; align-items: center; -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; -ms-align-items: center; justify-content: center; -moz-justify-content: center; -webkit-justify-content: center; -o-justify-content: center; -ms-justify-content: center; } #button { cursor: pointer; width: 130px; background: #f8f8f8; height: 50px; color: #999; position: absolute; right: 0; top: 0; font-size: 14px; text-align: center; -webkit-transition: 500ms all; -moz-transition: 500ms all; transition: 500ms all; align-items: center; -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; -ms-align-items: center; justify-content: center; -moz-justify-content: center; -webkit-justify-content: center; -o-justify-content: center; -ms-justify-content: center; } #button:hover { background-color: #dfdfdf; } .form-file { width: 488px; position: relative; } .form-password { position: relative; } .bar-strength { width: 60px; height: 15px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; background: #f8f8f8; position: absolute; right: 1px; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); } .bar-process { width: 100%; height: 100%; position: relative; } .bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; } .pw-very-weak .bar { background: #d00; width: 25px; } .pw-very-weak .label, .pw-weak .label { color: #d00; } .pw-weak .bar { background: #d00; width: 25px; } .pw-mediocre .bar { background: #fca812; width: 35px; } .pw-strong .bar { background: #fca812; width: 42px; } .pw-mediocre .label, .pw-strong .label { color: #fca812; } .pw-very-strong .bar { background: #1abc9c; width: 100%; } .pw-very-strong .label { color: #1abc9c; } .label { font-size: 11px; } .label i { font-size: 12px; } fieldset { border: none; padding: 0px; margin: 0px; } .steps { border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; padding: 12px 20px; margin-bottom: 20px;} .steps ul { justify-content: space-around; -moz-justify-content: space-around; -webkit-justify-content: space-around; -o-justify-content: space-around; -ms-justify-content: space-around; } .steps ul li { padding-right: 80px; padding-left: 0px; position: relative; } .steps ul li:after { position: absolute; width: 1px; height: 30px; content: ""; background: #ebebeb; right: 18px; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); } .steps ul li a { color: #999; text-decoration: none; font-weight: bold; } .steps ul li:last-child:after { width: 0px; } .steps ul .current a { color: #222; } .steps ul .current a .number { border: 2px solid #222; } .steps ul .done a { color: #1abc9c; } .steps ul .done a .number { position: relative; font-size: 0px; border: 2px solid #1abc9c; } .steps ul .done a .number:after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size: 14px; color: #1abc9c; font-family: 'Font Awesome 6 Pro'; content: '\f00c'; font-weight: bold; } .actions { position: absolute; bottom: 14px; width: 100%; /* text-align: right; */ padding: 0 20px; /* margin: 0 15px; */ right: 0; } .actions ul { align-items: center; -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; -ms-align-items: center; justify-content: flex-end; -moz-justify-content: flex-end; -webkit-justify-content: flex-end; -o-justify-content: flex-end; -ms-justify-content: flex-end; width: 100%; } .actions ul .disabled { display: none; } .actions ul li { margin-left: 10px; } .actions ul li:first-child a { background: #f8f8f8; color: #999; } .actions ul li:first-child a:hover { background-color: #dfdfdf; } .actions ul li a { width: 150px; height: 50px; color: #fff; background: #895784; align-items: center; -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; -ms-align-items: center; justify-content: center; -moz-justify-content: center; -webkit-justify-content: center; -o-justify-content: center; -ms-justify-content: center; text-decoration: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; } .actions ul li a:hover { background-color: #b375ad; } .content { overflow: hidden; } /* .content .current { padding-top: 60px; } */ .content h3 { display: none; } .fieldset-content { width:100%; float:left; padding-bottom:20px; border-bottom: 1px solid #ebebeb; padding-right: 110px; } .fieldset-footer { width:100%; float:left; padding: 28px 0; } .fieldset-footer span { color: #999; } .title { align-items: center; -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; -ms-align-items: center; } .number { width: 31px; height: 31px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; align-items: center; -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; -ms-align-items: center; justify-content: center; -moz-justify-content: center; -webkit-justify-content: center; -o-justify-content: center; -ms-justify-content: center; border: 2px solid #999; margin-right: 15px; } @media screen and (max-width: 992px) { .container { width: calc(100% - 40px); max-width: 100%; } .bar-strength { display: none; } } @media screen and (max-width: 768px) { .steps ul, .form-row { flex-direction: column; -moz-flex-direction: column; -webkit-flex-direction: column; -o-flex-direction: column; -ms-flex-direction: column; } .steps ul li:after { width: 0px; } .title { margin-bottom: 20px; margin-left: auto; margin-right: auto; } .form-row .form-date, .form-row .form-select, .form-file, input, select, textarea, .form-textarea textarea, #signup-form-p-2 #credit_card, #signup-form-p-2 #cvc, #signup-form-p-2 .form-radio-flex, #signup-form-p-2 .form-flex, #signup-form-p-2 .form-group input, .form-row .form-group label { width: 100%; } .form-row .form-group:first-child, .form-row .form-group:last-child { float: none; } input, select, textarea { margin-right: 0px; } .fieldset-content { padding-right: 0px;/* height: 600px; */} .form-group, .form-select, .form-radio, .form-textarea, .form-date { flex-direction: column; -moz-flex-direction: column; -webkit-flex-direction: column; -o-flex-direction: column; -ms-flex-direction: column; } label { width: 100%; text-align: left; margin-right: 0px; margin-bottom: 15px; } .form-row { padding-left: 0px; } } @media screen and (max-width: 600px) { #val { width: 99%; } #button { top: 60px; width: 100%; } .fieldset-footer { } .actions ul li a { width: 100px; } .steps ul li { padding-right: 0px; } } @media screen and (max-width: 480px) { .signup-form { padding-left: 30px; padding-right: 30px; } .form-radio-flex input + label { margin-bottom: 20px; } .form-flex { flex-direction: column; -moz-flex-direction: column; -webkit-flex-direction: column; -o-flex-direction: column; -ms-flex-direction: column; } .form-date-item #expiry_date, .form-date-item #expiry_year { width: 100%; margin-bottom: 10px; } /* .fieldset-content { height: 750px; }*/ } /*# sourceMappingURL=style.css.map */