Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/vreg/assets/css/forms/ |
@font-face {
font-family: sfProDisplay-Regular;
src: local(sfProDisplay-Regular), url('~/assets/fonts/sfProDisplay-Regular.otf') format('opentype');
}
@font-face {
font-family: sfProDisplay-Bold;
src: local(sfProDisplay-Bold), url('~/assets/fonts/sfProDisplay-Bold.otf') format('opentype');
}
@font-face {
font-family: sfProDisplay-Semibold;
src: local(sfProDisplay-Semibold), url('~/assets/fonts/sfProDisplay-Semibold.otf') format('opentype');
}
@font-face {
font-family: sfProDisplay-Medium;
src: local(sfProDisplay-Medium), url('~/assets/fonts/sfProDisplay-Medium.otf') format('opentype');
}
@font-face {
font-family: sfProDisplay-Light;
src: local(sfProDisplay-Light), url('~/assets/fonts/sfProDisplay-Light.otf') format('opentype');
}
@font-face {
font-family: license;
src: local(license), url('~/assets/fonts/license.ttf') format('truetype');
}
/* All common codes for desktop and mobile version */
html, body {
min-height: 100%;
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
a {
cursor: pointer;
}
a:focus, button:focus {
outline: none !important;
box-shadow: none !important;
text-decoration: none;
}
.f-container {
width: 100%;
max-width: 1110px;
padding: 0 15px;
margin: 0 auto;
}
.btn-form-green {
display: flex;
align-items: center;
justify-content: center;
background: #29A30B;
border: none;
border-radius: 2px;
min-height: 39px;
padding: 10px 20px 10px 25px;
font: 600 16px / 19px sfProDisplay-Regular;
color: #fff;
text-shadow: none;
transition: all .2s ease-in;
}
.btn-form-green svg {
transition: all .2s ease-in;
margin-left: 10px;
}
.btn-form-green svg path {
stroke-width: 1.8px;
}
.btn-form-green:hover, .btn-form-green:focus {
color: #fff;
}
.btn-form-green:hover svg, .btn-form-green:focus svg {
margin-left: 14px;
}
@media only screen and (min-width: 1200px) {
.container {
max-width: 1040px;
}
}
/* Step 1 Page */
.form-group.with-animation.with-tt .form-control {
padding-right: 44px;
}
.form-group.with-animation.with-tt .alert-icon {
display: block;
width: 18px;
position: absolute;
top: 16px;
right: 14px;
}
.form-group.with-animation.with-tt .alert-icon svg {
width: 18px;
display: block;
}
.form-page-content-wrapper {
min-height: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.top-bar {
background: #182D40;
}
.top-bar-inner {
width: 100%;
padding: 7px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-bar .left {
flex-grow: 1;
}
.top-bar p {
margin: 0;
color: #9AB5CE;
font: 400 12px / 15px sfProDisplay-Regular;
}
.top-bar .top-bar-link {
cursor: pointer;
color: #2FABFF;
display: inline-flex;
align-items: center;
font-weight: 400;
font-family: sfProDisplay-Regular;
}
.top-bar .top-bar-link .more {
margin-left: 3px;
}
.top-bar .top-bar-link .less {
display: none;
margin-left: 3px;
}
.top-bar .top-bar-link.open .more {
display: none;
}
.top-bar .top-bar-link.open .less {
display: block;
}
.top-bar .text {
margin-right: 4px;
}
.top-bar .top-bar-arrow {
margin-left: 4px;
display: block;
transition: all .2s ease-in;
}
.top-bar .top-bar-link.open .top-bar-arrow {
transform: rotate(180deg);
}
.top-bar .right {
flex-shrink: 0;
margin-left: 10px;
display: flex;
align-items: center;
}
.top-bar .right a {
margin-left: 19px;
}
.top-bar .right svg {
display: block;
}
.top-hidden-content {
padding-bottom: 10px;
padding-right: 190px;
/*display: none;*/
}
.form-p-header {
flex-shrink: 0;
background: #182D40;
padding: 8px 0;
}
.form-p-header p {
margin: 0;
color: #9AB5CE;
letter-spacing: 0.01em;
font: 12px / 14px sfProDisplay-Regular;
}
.form-p-header p b {
font-weight: 600;
}
.form-p-footer {
flex-shrink: 0;
padding: 8px 0;
background: #182D40;
}
.form-p-footer-inner {
display: flex;
flex-wrap: wrap;
}
.form-p-footer-inner a {
color: #9AB5CE;
letter-spacing: 0.01em;
font: 400 12px / 14px sfProDisplay-Regular;
margin-right: 50px;
}
.form-p-footer-inner a:last-child {
margin-right: 0;
}
.form-p-footer-inner a:hover, .form-p-footer-inner a:focus {
color: #9AB5CE;
text-decoration: none;
}
.form-content-wrapper {
display: flex;
flex-shrink: 0;
flex-grow: 1;
width: 100%;
}
.form-content-wrapper > .steps-content-wrapper {
flex-shrink: 0;
width: 60%;
padding-right: 20px;
padding-left: 20px;
display: flex;
justify-content: flex-end;
background: #fff;
}
.form-content-wrapper > .steps-content-wrapper > .content-inner {
width: 100%;
max-width: 655px;
}
.form-content-wrapper > .steps-content-wrapper > .content-inner > .steps-content.medium-width {
width: 100%;
max-width: 464px;
}
.form-content-wrapper > .steps-content-wrapper > .content-inner > .steps-content {
max-width: 630px;
}
.form-content-wrapper > .sidebar-wrapper {
flex-shrink: 0;
width: 40%;
padding-left: 70px;
padding-right: 20px;
background: #FAFAFA;
}
.form-content-wrapper > .sidebar-wrapper > .sidebar-content {
padding-top: 30px;
padding-bottom: 30px;
width: 100%;
max-width: 330px;
}
/* Steps Contents -- Step 1 */
.steps-content {
padding: 20px 0 104px 0;
}
.steps-content {
/*padding-bottom: 220px;*/
}
.form-logo-wrapper {
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.form-logo-wrapper .right {
display: flex;
align-items: center;
display: none;
}
.form-logo-wrapper .star-wrapper {
display: flex;
align-items: center;
margin-right: 9px;
}
.form-logo-wrapper .star-wrapper img {
display: block;
margin-right: 2px;
width: 13px;
}
.form-logo-wrapper .animated-rating {
display: block;
width: 170px;
}
.form-logo-wrapper .star-wrapper img:last-child {
margin-right: 0;
}
.form-logo-wrapper .star-wrapper svg {
display: block;
margin-right: 2px;
}
.form-logo-wrapper .star-wrapper svg:last-child {
margin-right: 0;
}
.form-logo-wrapper .rating-box {
padding: 4px 10px 5px 10px;
background: #245B92;
border-radius: 20px;
}
.form-logo-wrapper .rating-box p {
margin: 0;
color: #FFFFFF;
letter-spacing: 0.01em;
font: 11px / 13px sfProDisplay-Light;
}
.steps-content .logo {
display: flex;
}
.steps-content .logo img {
display: block;
width: 96px;
}
.steps-content .breadcrumb-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.steps-content .breadcrumb-wrapper a {
color: #868686;
text-decoration: none;
margin-right: 7px;
font: 500 12px / 14px sfProDisplay-Light;
letter-spacing: 0.01em;
margin-bottom: 10px;
}
.steps-content .breadcrumb-wrapper a:hover, .steps-content .breadcrumb-wrapper a:focus {
text-decoration: none;
color: #868686;
}
.steps-content .breadcrumb-wrapper a.selected {
color: #182D40;
font-family: sfProDisplay-Regular;
}
.steps-content .breadcrumb-wrapper a.prev-selected {
color: #819BB4;
}
.steps-content .breadcrumb-wrapper a:last-child {
margin-right: 0;
}
.steps-content .breadcrumb-wrapper svg {
margin-right: 11px;
margin-bottom: 10px;
}
.steps-content .breadcrumb-wrapper svg.selected path {
stroke: #182D40;
}
.steps-content .breadcrumb-wrapper svg.prev-selected path {
stroke: #819BB4;
}
.steps-content h1 {
color: #182D40;
margin: 0 0 7px 0;
letter-spacing: 0.004em;
font: 700 38px / 45px sfProDisplay-Bold;
}
.steps-content p.description {
color: #868686;
margin: 0 0 30px 0;
letter-spacing: 0.01em;
font: 400 15px / 18px sfProDisplay-Regular;
}
.steps-content p.description a {
text-decoration: none;
color: #2FABFF;
display: inline-block;
}
.steps-content p.description a:hover, .steps-content p.description a:focus {
text-decoration: none;
color: #2FABFF;
}
.steps-content .sub-title {
margin-top: 30px;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.steps-content .sub-title .left {
flex-grow: 1;
padding-right: 20px;
}
.steps-content .sub-title h5 {
color: #182D40;
letter-spacing: 0.01em;
margin: 0 0 7px 0;
font: 600 18px / 21px sfProDisplay-Regular;
}
.steps-content .sub-title p.description {
margin: 0;
}
.steps-content .sub-title .btn-cancel-vehicle {
color: #9CA3B5;
letter-spacing: 0.01em;
font: 400 15px / 18px sfProDisplay-Light;
text-decoration: none;
display: flex;
align-items: center;
flex-shrink: 0;
margin-bottom: 7px;
}
.steps-content .sub-title .btn-cancel-vehicle:hover,
.steps-content .sub-title .btn-cancel-vehicle:focus {
text-decoration: none;
color: #9CA3B5;
}
.steps-content .sub-title .btn-cancel-vehicle svg {
margin-left: 10px;
}
.steps-content .another-vehicle-wrapper {
border-top: 1px solid #DCDCDC;
padding-top: 30px;
margin-top: 60px;
}
.form-group.with-animation {
position: relative;
margin-bottom: 12px;
}
.form-group.with-animation .placeholder-text {
margin: 0;
color: #868686;
letter-spacing: 0.01em;
font: 15px / 19px sfProDisplay-Light;
position: absolute;
left: 16px;
top: 15px;
pointer-events: none;
transition: all .2s ease-in;
}
.form-group.with-animation.focused .placeholder-text {
font-size: 12px;
top: 4px;
}
.form-group.with-animation .form-control {
height: 50px;
box-shadow: none;
border: 1px solid #DCDCDC;
padding: 24px 15px 6px 20px;
color: #182D40;
letter-spacing: 0.01em;
border-radius: 2px;
font: 600 15px / 18px sfProDisplay-Regular;
transition: all .2s ease-in;
}
.form-group.with-animation .form-control.with-border {
border: 1px solid #819BB4;
box-shadow: 0 0 2px #819BB4;
}
.vehicle-type-wrapper {
position: relative;
border: 1px solid #DCDCDC;
border-radius: 2px;
margin-bottom: 12px;
}
.vehicle-type-wrapper.mh-50 {
min-height: 50px;
}
.vehicle-type-wrapper.opened .vehicle-type-wrapper-menu {
position: absolute;
left: -1px;
right: -1px;
top: -1px;
height: 300px;
background: #fff;
border: 1px solid #819BB4;
border-radius: 2px;
box-shadow: 0 0 2px #819bb4;
z-index: 25;
}
.vehicle-type-wrapper.medium-height.opened .vehicle-type-wrapper-menu {
height: 220px;
}
.vehicle-type-wrapper .vehicle-type-header {
height: 48px;
position: relative;
padding: 24px 15px 6px 20px;
cursor: pointer;
}
.vehicle-type-wrapper .vehicle-type-header .vehicle-type-title {
position: absolute;
left: 16px;
top: 14px;
margin: 0;
font: 15px / 19px sfProDisplay-Light;
letter-spacing: 0.01em;
color: #868686;
pointer-events: none;
}
.vehicle-type-wrapper .vehicle-type-header.selected .vehicle-type-title {
top: 4px;
font-size: 12px;
}
.vehicle-type-wrapper .vehicle-type-header .vehicle-type-name {
margin: 0;
color: #182D40;
font: 600 15px / 18px sfProDisplay-Regular;
pointer-events: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.vehicle-type-wrapper .vehicle-type-header .arrow {
position: absolute;
right: 14px;
top: 20px;
transform-origin: 50% 50%;
}
.vehicle-type-wrapper .vehicle-type-header.open .arrow {
transform: rotateZ(180deg);
}
.vehicle-type-wrapper .vehicle-type-options {
padding: 0px 27px 10px 16px;
background: #fff;
overflow: auto;
height: calc(100% - 48px);
display: none;
}
.vehicle-type-wrapper .vehicle-type-options .vehicle-type-row {
padding: 20px 0;
border-bottom: 1px solid #DCDCDC;
cursor: pointer;
}
.vehicle-type-wrapper .vehicle-type-options .vehicle-type-row:last-child {
border-bottom: none;
}
.vehicle-type-wrapper .vehicle-type-row h6 {
margin: 0 0 3px 0;
color: #868686;
font: 15px / 18px sfProDisplay-Regular;
letter-spacing: 0.01em;
transition: all .2s ease-in;
}
.vehicle-type-wrapper .vehicle-type-row:hover h6 {
color: #182D40;
}
.vehicle-type-wrapper .vehicle-type-row p.small-text {
margin: 0;
color: #868686;
font: 12px / 16px sfProDisplay-Regular;
letter-spacing: 0.01em;
transition: all .2s ease-in;
}
.vehicle-type-wrapper .vehicle-type-row:hover p.small-text {
color: #182D40;
}
.vehicle-type-wrapper .v-radio-wrapper {
margin-left: -1px;
margin-right: -1px;
/*display: none;*/
}
.vehicle-type-wrapper .v-radio-wrapper label {
position: relative;
display: block;
width: inherit;
margin: 0;
margin-top: -1px;
}
.vehicle-type-wrapper .v-radio-wrapper label:hover {
z-index: 10;
}
.vehicle-type-wrapper .v-radio-wrapper label.selected {
z-index: 20;
}
.vehicle-type-wrapper .v-radio-wrapper label:first-child {
margin-top: 0;
}
.vehicle-type-wrapper .v-radio-wrapper label:last-child {
margin-bottom: -1px;
}
.vehicle-type-wrapper .v-radio-wrapper .radio-input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
}
.vehicle-type-wrapper .v-radio-wrapper .radio-box {
position: relative;
z-index: 5;
background: #fff;
width: inherit;
padding: 16px 19px 16px 67px;
border: 1px solid #DCDCDC;
cursor: pointer;
transition: all .3s ease-in;
}
.vehicle-type-wrapper .v-radio-wrapper .radio-input:checked + .radio-box {
border-color: #2FABFF;
background: #EAF7FF;
}
.vehicle-type-wrapper .v-radio-wrapper label:last-child .radio-box {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.vehicle-type-wrapper .radio-box p {
margin: 0;
color: #868686;
letter-spacing: 0.01em;
font: 15px / 18px sfProDisplay-Light;
transition: all .3s ease-in;
}
.vehicle-type-wrapper .radio-box:hover p {
color: #182D40;
}
.vehicle-type-wrapper .radio-input:checked + .radio-box p {
color: #182D40;
}
.vehicle-type-wrapper .radio-box .outer {
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 1px solid #9AB5CE;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease-in;
}
.vehicle-type-wrapper .radio-box:hover .outer {
background: #9AB5CE;
}
.vehicle-type-wrapper .radio-input:checked + .radio-box .outer {
background: #9AB5CE;
}
.vehicle-type-wrapper .radio-box .inner {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.vehicle-type-wrapper.insurance-wrapper {
/*display: none;*/
}
.steps-content .form-group.with-animation.policy-number {
/*display: none;*/
}
.steps-content .add-new-vehicle {
border: 1px solid #DCDCDC;
padding: 20px;
border-radius: 6px;
background: #fff;
margin-top: 60px;
/*display: none;*/
}
.steps-content .add-new-vehicle a {
display: flex;
align-items: center;
color: #2FABFF;
letter-spacing: 0.01em;
font: 15px / 18px sfProDisplay-Regular;
text-decoration: none;
transition: all .2s ease-in;
}
.steps-content .add-new-vehicle a:hover, .steps-content .add-new-vehicle a:focus {
text-decoration: none;
color: #2FABFF;
}
.steps-content .add-new-vehicle svg {
margin-right: 9px;
}
.steps-content .form-button-wrapper {
margin-top: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
.steps-content .form-button-wrapper .btn-return {
display: flex;
align-items: center;
letter-spacing: 0.01em;
color: #182D40;
text-decoration: none;
font: 12px / 14px sfProDisplay-Regular;
}
.steps-content .form-button-wrapper .btn-return:hover, .steps-content .form-button-wrapper .btn-return:focus {
text-decoration: none;
color: #182D40;
}
.steps-content .form-button-wrapper .btn-return svg {
margin-right: 14px;
}
.steps-content .form-button-wrapper .btn-form-green {
min-width: 145px;
}
/* SideBar contents */
.sidebar-content h6 {
color: #819BB4;
margin: 0 0 12px 0;
letter-spacing: 0.01em;
font: 14px / 18px sfProDisplay-Regular;
}
.sidebar-content .payment-img-box {
margin: 0 0 55px 0;
display: flex;
flex-wrap: wrap;
/* margin-left: -3px;
margin-right: -3px; */
}
.sidebar-content .payment-img-box .p-box {
width: 61px;
height: 31px;
border: 1px solid #DCDCDC;
background: #fff;
border-radius: 2px;
margin: 0 0px 6px 3px;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-content .shopper-approved-box {
margin: 0 0 14px 0;
display: flex;
align-items: center;
}
.sidebar-content .shopper-approved-box .shopper-img {
display: block;
margin: 0 13px 0 0;
}
.sidebar-content .shopper-approved-box .star-wrapper {
display: flex;
align-items: center;
margin-right: 10px;
}
.sidebar-content .shopper-approved-box .star-wrapper img {
display: block;
width: 11px;
margin-right: 3px;
}
.sidebar-content .shopper-approved-box .star-wrapper img:last-child {
margin-right: 0;
}
.sidebar-content .shopper-approved-box .star-wrapper svg {
display: block;
margin-right: 3px;
}
.sidebar-content .shopper-approved-box .star-wrapper svg:last-child {
margin-right: 0;
}
.sidebar-content .shopper-approved-box .rating-box {
padding: 3px 7px;
background: #245B92;
border-radius: 16px;
}
.sidebar-content .shopper-approved-box .rating-box p {
margin: 0;
color: #FFFFFF;
letter-spacing: 0.01em;
font: 7px / 10px sfProDisplay-Regular;
}
.sidebar-content .sidebar-slider-box {
overflow: hidden;
margin-left: -20px;
width: calc(100% + 20px);
padding-left: 20px;
}
.sidebar-content .sidebar-slider-box .item {
padding-bottom: 35px;
max-width: 330px;
}
.sidebar-content .sidebar-slider-box.owl-carousel .owl-stage-outer {
overflow: visible;
}
.sidebar-content .sidebar-slider-outer {
position: relative;
padding: 13px 13px 12px 13px;
background: #fff;
border-radius: 10px;
border: 1px solid #DADADA;
}
.sidebar-content .sidebar-slider-outer .scooter-img {
width: 26px;
display: block;
position: absolute;
left: -17px;
bottom: -29px;
z-index: 5;
}
.sidebar-content .sidebar-slider-outer .bubble-arrow {
display: block;
width: 11px;
position: absolute;
left: 0px;
bottom: -5px;
z-index: 10;
}
.sidebar-content .sidebar-slider-outer p {
color: #9CA3B5;
margin: 0 0 15px 0;
font: italic 14px / 18px sfProDisplay-Light;
}
.sidebar-content .sidebar-slider-outer h6 {
color: #9CA3B5;
font: 14px / 18px sfProDisplay-Light;
margin: 0;
}
.sidebar-content .sidebar-slider-outer h6 b {
font-weight: 600;
}
/* Form Intro Page CSS */
.form-intro-header {
padding: 20px 0;
background: #fff;
}
.form-intro-header .logo img {
display: block;
height: 40px;
}
.form-intro-content {
padding: 10px 0 100px 0;
background: #fff;
}
.form-intro-content .intro-wrapper {
width: 100%;
max-width: 482px;
padding: 0 20px;
margin: 0 auto;
}
.steps-content h4 {
color: #030A69;
margin: 0 0 15px 0;
font: 600 16px / 19px sfProDisplay-Regular;
}
.form-intro-content h1.with-img {
position: relative;
padding-right: 70px;
}
.form-intro-content h1 > .money-back-img {
position: absolute;
right: 0;
top: -34px;
display: block;
width: 64px;
}
.form-intro-content .vehicle-type-wrapper {
margin-bottom: 30px;
}
.form-intro-content .vehicle-type-wrapper.opened .vehicle-type-wrapper-menu {
height: 257px;
}
.form-intro-content .vehicle-type-wrapper .state-row {
position: relative;
padding-left: 40px;
}
.form-intro-content .vehicle-type-wrapper .state-row img {
position: absolute;
left: 0;
top: 3px;
display: block;
width: 28px;
}
.form-intro-content .vehicle-type-wrapper.state-wrapper .vehicle-type-options .vehicle-type-row {
padding: 17px 0;
}
.form-intro-content .vehicle-type-wrapper .vehicle-type-header {
padding-left: 16px;
}
.form-intro-content .vehicle-type-wrapper .vehicle-type-header .vehicle-type-name {
display: flex;
}
.form-intro-content .vehicle-type-wrapper .vehicle-type-header .vehicle-type-name img {
display: block;
margin-right: 14px;
}
.checkbox-input-wrapper {
display: block;
position: relative;
width: 100%;
margin: 0;
}
.checkbox-input-wrapper .c-input {
position: absolute;
height: 0;
width: 0;
opacity: 0;
}
.checkbox-input-wrapper .checkbox-inner {
background: #fff;
position: relative;
z-index: 10;
padding-left: 30px;
min-height: 20px;
cursor: pointer;
}
.checkbox-input-wrapper .checkbox-inner .outer {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 1px solid #DCDCDC;
border-radius: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s ease-in;
}
.checkbox-input-wrapper .checkbox-inner .inner {
width: 16px;
height: 16px;
border-radius: 1px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s ease-in;
}
.checkbox-input-wrapper .checkbox-inner .inner svg {
display: block;
}
.checkbox-input-wrapper .checkbox-inner p {
margin: 0;
color: #868686;
letter-spacing: 0.01em;
font: 14px / 20px sfProDisplay-Light;
transition: all .2s ease-in;
}
.checkbox-input-wrapper .checkbox-inner p a {
text-decoration: underline;
color: #868686;
transition: all .2s ease-in;
}
.checkbox-input-wrapper .checkbox-inner p a:hover, .checkbox-input-wrapper .checkbox-inner p a:focus {
color: #182D40;
text-decoration: underline;
}
.checkbox-input-wrapper .c-input:checked + .checkbox-inner .outer {
border-color: #182D40;
}
.checkbox-input-wrapper .c-input:checked + .checkbox-inner .inner {
background: #182D40;
}
.checkbox-input-wrapper .c-input:checked + .checkbox-inner p, .checkbox-input-wrapper .c-input:checked + .checkbox-inner p a {
color: #182D40;
}
.form-intro-content .btn-form-green {
display: block;
width: 100%;
margin: 30px 0;
height: 50px;
}
.form-intro-content .grey-text {
color: #868686;
margin: 0 0 50px 0;
letter-spacing: 0.01em;
font: 13px / 16px sfProDisplay-Light;
}
.form-intro-content .govt-site {
margin: 0;
text-align: center;
line-height: 0;
}
.form-intro-content .govt-site a {
color: #868686;
letter-spacing: 0.01em;
text-decoration: none;
font: 14px / 17px sfProDisplay-Light;
}
.form-intro-content .govt-site a:hover, .form-intro-content .govt-site a:focus {
text-decoration: none;
color: #868686;
}
.form-intro-content .govt-site a svg {
display: none;
}
.plate.small {
width: 62px;
height: 31px;
margin-right: 17px;
background: #fff url(/images/plate-bg.svg) center center / 100% 100% no-repeat;
border-radius: 4px;
border: 1px solid #9CA3B5;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
.plate.small h3 {
position: relative;
z-index: 10;
margin: 3px 0 0 0;
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.95);
color: #00633F;
font: 12px / 14px license;
}
.plate.small .orange-wrapper {
position: relative;
z-index: 1;
width: 18px;
height: 20px;
}
.plate.small .orange-wrapper img {
position: absolute;
left: 50%;
top: 50%;
opacity: .7;
width: 25px;
transform: translate(-59%, -45%);
}
.steps-content .form-plate-wrapper {
border: 1px solid #DCDCDC;
border-radius: 6px;
padding: 30px 30px 1px 30px;
margin-bottom: 50px;
}
.steps-content .form-plate-wrapper .form-plate-header {
position: relative;
margin-bottom: 30px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.steps-content .form-plate-wrapper .form-plate-header .left {
display: flex;
align-items: center;
}
.steps-content .form-plate-wrapper .form-plate-header .left h4 {
margin: 0;
color: #00633F;
letter-spacing: 0.01em;
font: 600 14px / 15px sfProDisplay-Regular;
}
.steps-content .form-plate-wrapper .form-plate-header .btn-cancel-vehicle {
color: #9CA3B5;
letter-spacing: 0.01em;
font: 400 15px / 18px sfProDisplay-Light;
text-decoration: none;
display: flex;
align-items: center;
}
.steps-content .form-plate-wrapper .form-plate-header .btn-cancel-vehicle:hover,
.steps-content .form-plate-wrapper .form-plate-header .btn-cancel-vehicle:focus {
text-decoration: none;
color: #9CA3B5;
}
.steps-content .form-plate-wrapper .form-plate-header .btn-cancel-vehicle svg {
margin-left: 10px;
}
.steps-content .form-plate-wrapper h5 {
margin: 0 0 12px 0;
color: #1D2E59;
letter-spacing: 0.01em;
font: 100 15px / 19px sfProDisplay-Regular;
}
.vehicle-type-wrapper {
/*margin-bottom: 8px;*/
}
.vehicle-renewal-option-wrapper {
/*display: none;*/
}
.radio-option-row {
margin-left: -6px;
margin-right: -6px;
display: flex;
margin-bottom: 30px;
}
.radio-option-row .radio-option {
flex-shrink: 0;
width: 50%;
padding: 0 6px;
}
.radio-option-row .radio-option label {
display: block;
margin: 0;
position: relative;
}
.radio-option-row .radio-option .radio-input {
position: absolute;
height: 0;
width: 0;
opacity: 0;
}
.radio-option-row .radio-option .radio-box {
position: relative;
z-index: 2;
background: #fff;
border: 1px solid #DCDCDC;
border-radius: 2px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
cursor: pointer;
transition: all .2s ease-in;
}
.radio-option-row .radio-option .radio-box:hover {
background: #EAF7FF;
border-color: #2FABFF;
}
.radio-option-row .radio-option .radio-box p {
margin: 0;
color: #868686;
letter-spacing: 0.01em;
font: 15px / 18px sfProDisplay-Light;
transition: all .2s ease-in;
}
.radio-option-row .radio-option .radio-box:hover p {
color: #182D40;
}
.radio-option-row .radio-option .radio-input:checked + .radio-box {
background: #EAF7FF;
border-color: #2FABFF;
}
.radio-option-row .radio-option .radio-input:checked + .radio-box p {
color: #182D40;
font: 15px / 18px sfProDisplay-regular;
}
.steps-content .driver-license-row {
/*display: none;*/
}
.driver-license-row .radio-option-row .radio-option {
width: 100%;
}
.driver-license-row .radio-option-row .radio-option .radio-box p {
display: flex;
align-items: center;
justify-content: center;
}
.driver-license-row .radio-option-row .radio-option .radio-box p svg {
display: block;
margin-right: 10px;
}
/* Step 3 CSS */
.v-form-row {
display: flex;
margin-left: -6px;
margin-right: -6px;
}
.v-form-row .v-form-col {
flex-basis: 0;
flex-grow: 1;
padding: 0 6px;
}
h3 {
color: #182D40;
margin: 60px 0 7px 0;
letter-spacing: 0.01em;
font: 600 18px / 21px sfProDisplay-Regular;
}
.terms-desc {
color: #868686;
margin: 0 0 30px 0;
letter-spacing: 0.01em;
font: 14px / 17px sfProDisplay-Regular;
}
.checkbox-input-wrapper {
margin-bottom: 12px;
}
.checkbox-input-wrapper .checkbox-inner {
display: flex;
align-items: center;
}
.checkbox-input-wrapper .checkbox-inner p {
color: #182D40;
font: 12px / 17px sfProDisplay-Light;
}
.terms-content-wrapper {
margin-bottom: 50px;
padding-left: 30px;
}
.terms-content-wrapper p {
margin: 0 0 15px 0;
color: #182D40;
letter-spacing: 0.01em;
font: 12px / 17px sfProDisplay-Light;
position: relative;
padding-left: 15px;
}
.terms-content-wrapper p:last-child {
margin-bottom: 0;
}
.terms-content-wrapper p span {
position: absolute;
left: 0;
top: 0;
}
.terms-content-wrapper p a {
text-decoration: none;
color: #2FABFF;
}
.terms-content-wrapper p a:hover, .terms-content-wrapper p a:focus {
text-decoration: none;
color: #2FABFF;
}
h5 {
margin: 0 0 11px 0;
color: #182D40;
letter-spacing: 0.01em;
font: 600 16px / 19px sfProDisplay-Regular;
}
.demo-e-signature-outer {
border-radius: 6px;
border: 1px solid #DCDCDC;
padding: 3px;
}
.demo-e-signature {
width: 100%;
height: 140px;
background: url(/images/signature-watermark-small.png) left top / auto 100% repeat;
}
.btn-clear-signature {
border: none;
box-shadow: none;
text-shadow: none;
background: none;
padding: 0;
margin: 10px 0 0 0;
color: #2FABFF;
letter-spacing: 0.01em;
font: 14px / 20px sfProDisplay-Light;
}
/* Step 4 CSS */
.order-summary-box {
margin-bottom: 50px;
}
.order-summary-box .order-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.order-summary-box .order-summary-header .left {
flex-grow: 1;
padding-right: 10px;
display: flex;
align-items: center;
}
.order-summary-box .order-summary-header .right {
flex-shrink: 0;
width: 60px;
}
.order-summary-box .order-summary-header .left .plate.small {
margin-right: 21px;
}
.order-summary-box .order-summary-header h5 {
margin: 0;
color: #182D40;
letter-spacing: 0.01em;
font: 600 14px / 18px sfProDisplay-Regular;
}
.order-summary-box .order-summary-header h5 .car-model {
margin-left: 12px;
}
.order-summary-box .order-summary-header h5 .renewal-time {
display: block;
color: #819BB4;
font: 12px / 16px sfProDisplay-Light;
margin-top: 3px;
}
.order-summary-box .order-summary-header .right h5 {
text-align: right;
}
.promo-code-wrapper {
margin-bottom: 40px;
display: flex;
}
.promo-code-wrapper .form-group {
margin-bottom: 0;
flex-grow: 1;
}
.promo-code-wrapper .form-group .form-control {
border: 1px solid #DCDCDC;
border-radius: 2px;
height: 37px;
padding: 9px 10px;
letter-spacing: 0.01em;
font: 14px / 17px sfProDisplay-Regular;
color: #182D40;
}
.promo-code-wrapper .form-group .form-control:focus {
border-color: #DCDCDC;
box-shadow: none;
}
.promo-code-wrapper .form-group .form-control::-webkit-input-placeholder {
color: #868686;
font-family: sfProDisplay-Light;
}
.promo-code-wrapper .form-group .form-control:-moz-placeholder {
opacity: 1;
color: #868686;
font-family: sfProDisplay-Light;
}
.promo-code-wrapper .form-group .form-control::-moz-placeholder {
opacity: 1;
color: #868686;
font-family: sfProDisplay-Light;
}
.promo-code-wrapper .form-group .form-control:-ms-input-placeholder {
color: #868686;
font-family: sfProDisplay-Light;
}
.promo-code-wrapper .form-group .form-control::-ms-input-placeholder {
color: #868686;
font-family: sfProDisplay-Light;
}
.promo-code-wrapper .form-group .form-control::placeholder {
color: #868686;
font-family: sfProDisplay-Light;
}
.promo-code-wrapper .btn-form-green {
flex-shrink: 0;
width: 78px;
min-height: 37px;
margin-left: 12px;
font: 14px / 17px sfProDisplay-Regular;
padding: 10px;
}
.promo-code-wrapper .btn-form-green:disabled {
color: #9CA3B5;
background: #DCDCDC;
}
.order-summary-box .order-summary-price-wrapper p {
margin: 0 0 10px 0;
letter-spacing: 0.01em;
color: #819BB4;
font: 14px / 18px sfProDisplay-Light;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.order-summary-box .order-summary-price-wrapper p .price-title {
flex-grow: 1;
padding-right: 15px;
}
.order-summary-box .order-summary-price-wrapper p .price {
flex-shrink: 0;
width: 95px;
text-align: right;
}
.order-summary-box .order-summary-price-wrapper p.total {
margin: 15px 0 0 0;
padding-top: 12px;
border-top: 1px solid #DCDCDC;
}
.order-summary-box .order-summary-price-wrapper p.total b {
font: 600 16px / 20px sfProDisplay-Regular;
color: #182D40;
}
.order-summary-box .order-summary-price-wrapper p.total .price b {
margin-left: 4px;
vertical-align: bottom;
}
.order-sidebar p.bill-desc {
margin: 0 0 31px 0;
letter-spacing: 0.01em;
color: #182D40;
font: 12px / 19px sfProDisplay-Regular;
}
.order-sidebar p.bill-desc a {
text-decoration: none;
color: #2FABFF;
}
.order-sidebar p.bill-desc a:hover, .order-sidebar p.bill-desc a:focus {
text-decoration: none;
color: #2FABFF;
}
.order-sidebar .refund-notice-box {
background: #FFF1C0;
border: 1px solid #F50707;
border-radius: 2px;
padding: 15px;
}
.order-sidebar .refund-notice-box h6 {
margin: 0 0 15px 0;
color: #182D40;
letter-spacing: 0.01em;
font: 600 14px / 20px sfProDisplay-Regular;
}
.order-sidebar .refund-notice-box p {
color: #182D40;
letter-spacing: 0.01em;
font: 400 14px / 20px sfProDisplay-Regular;
margin: 0;
}
.order-sidebar .refund-notice-box p a {
text-decoration: none;
color: #2FABFF;
}
.order-sidebar .refund-notice-box p a:hover, .order-sidebar .refund-notice-box p a:focus {
text-decoration: none;
color: #2FABFF;
}
/* Step 5 CSS */
.user-info-change-wrapper {
border: 1px solid #DCDCDC;
border-radius: 6px;
padding: 0 30px;
margin: 60px 0;
}
.user-info-change-wrapper .user-info-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1px solid #DCDCDC;
}
.user-info-change-wrapper .user-info-row:last-child {
border-bottom: none;
}
.user-info-change-wrapper .user-info-row .info {
flex-grow: 1;
display: flex;
align-items: center;
}
.user-info-change-wrapper h6 {
flex-shrink: 0;
width: 79px;
margin: 0;
color: #868686;
letter-spacing: 0.01em;
font: 15px / 18px sfProDisplay-Regular;
}
.user-info-change-wrapper p {
margin: 0;
color: #182D40;
letter-spacing: 0.01em;
word-break: break-all;
font: 15px / 18px sfProDisplay-Regular;
}
.user-info-change-wrapper .btn-change {
text-decoration: none;
color: #819BB4;
letter-spacing: 0.01em;
font: 15px / 18px sfProDisplay-Regular;
margin-left: 34px;
}
.user-info-change-wrapper .btn-change:hover, .user-info-change-wrapper .btn-change:focus {
text-decoration: none;
color: #819BB4;
}
h5 {
margin: 0 0 30px 0;
color: #182D40;
letter-spacing: 0.01em;
font: 600 18px / 21px sfProDisplay-Regular;
}
.step-radio-label {
position: relative;
display: block;
margin: 0;
}
.step-radio-label:hover {
z-index: 2;
}
.step-radio-label.selected {
z-index: 5;
}
.step-radio-label .radio-input {
position: absolute;
height: 0;
width: 0;
opacity: 0;
}
.step-radio-label .step-radio-box {
background: #fff;
position: relative;
border: 1px solid #DCDCDC;
border-radius: 2px;
padding: 15px 30px 15px 67px;
display: flex;
align-items: center;
cursor: pointer;
justify-content: space-between;
transition: all .2s ease-in;
}
/* .step-radio-label .step-radio-box:hover {
border: 1px solid #2FABFF;
background: rgba(47, 171, 255, 0.1);
} */
.step-radio-label .radio-input:checked + .step-radio-box {
border: 1px solid #2FABFF;
background: rgba(47, 171, 255, 0.1);
}
.step-radio-label .step-radio-box p {
margin: 0;
letter-spacing: 0.01em;
color: #868686;
font: 15px / 18px sfProDisplay-Light;
transition: all .2s ease-in;
}
.step-radio-label .step-radio-box:hover p {
color: #182D40;
}
.step-radio-label .radio-input:checked + .step-radio-box p {
color: #182D40;
font: 15px / 18px sfProDisplay-Regular;
}
.step-radio-label .step-radio-box h5 {
margin: 0 0 0 20px;
min-width: 80px;
flex-shrink: 0;
text-align: right;
letter-spacing: 0.01em;
color: #868686;
font: 15px / 18px sfProDisplay-Light;
transition: all .2s ease-in;
}
.step-radio-label .step-radio-box:hover h5 {
color: #182D40;
}
.step-radio-label .radio-input:checked + .step-radio-box h5 {
color: #182D40;
font: 15px / 18px sfProDisplay-Light;
}
.step-radio-label .step-radio-box .outer {
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 1px solid #9AB5CE;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease-in;
}
.step-radio-label .step-radio-box:hover .outer {
background: #9AB5CE;
}
.step-radio-label .radio-input:checked + .step-radio-box .outer {
background: #9AB5CE;
}
.step-radio-label .step-radio-box .inner {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.step-radio-label {
margin-bottom: 12px;
}
/* Step 6 CSS */
.steps-content.form-button-wrapper .btn-form-green {
min-width: 183px;
}
h5 {
margin: 0 0 7px 0;
color: #182D40;
letter-spacing: 0.01em;
font: 600 18px / 21px sfProDisplay-Regular;
}
h5.mt {
margin-top: 60px;
}
.payment-box {
margin-bottom: 12px;
}
.payment-box.opened .step-radio-label .step-radio-box {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.payment-box .img-wrapper {
display: flex;
align-items: center;
}
.payment-box .img-wrapper img {
display: block;
max-height: 15px;
margin-left: 28px;
}
.payment-box .img-wrapper img:first-child {
margin-left: 0;
}
.payment-box .payment-details {
padding: 40px 30px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border: 1px solid #DCDCDC;
border-top: none;
background: #FAFAFA;
/*display: none;*/
}
.payment-details.credit-card {
background: #9AB5CE;
border-color: #9AB5CE;
}
.payment-details .form-group {
margin-bottom: 11px;
position: relative;
}
.payment-details .form-group.card-no {
margin-bottom: 0;
}
.payment-details .form-group.card-no .card-icon {
display: block;
height: 18px;
position: absolute;
top: 16px;
left: 16px;
}
.payment-details .form-control {
height: 50px;
padding: 16px 16px;
border: none;
border-radius: 2px;
box-shadow: none;
letter-spacing: 0.01em;
color: #182D40;
font: 15px / 18px sfProDisplay-Regular;
}
.payment-details .form-control:focus {
box-shadow: none;
}
.payment-details .form-group.card-no .form-control {
padding-left: 52px;
padding-right: 120px;
}
.payment-details .form-group.card-no .mm-yy {
position: absolute;
margin: 0;
right: 30px;
top: 16px;
color: #868686;
letter-spacing: 0.01em;
font: 15px / 18px sfProDisplay-Light;
}
.payment-details .form-control::-webkit-input-placeholder {
color: #868686;
font-family: sfProDisplay-Light;
}
.payment-details .form-control:-moz-placeholder {
opacity: 1;
color: #868686;
font-family: sfProDisplay-Light;
}
.payment-details .form-control::-moz-placeholder {
opacity: 1;
color: #868686;
font-family: sfProDisplay-Light;
}
.payment-details .form-control:-ms-input-placeholder {
color: #868686;
font-family: sfProDisplay-Light;
}
.payment-details .form-control::-ms-input-placeholder {
color: #868686;
font-family: sfProDisplay-Light;
}
.payment-details .form-control::placeholder {
color: #868686;
font-family: sfProDisplay-Light;
}
.payment-details .next-img {
display: block;
margin: 0 auto 25px auto;
}
.payment-details .next-text {
margin: 0;
text-align: center;
letter-spacing: 0.01em;
color: #182D40;
font: 15px / 18px sfProDisplay-Light;
}
.payment-box .payment-img {
max-height: 18px;
}
.step-radio-label .step-radio-box.amazon {
padding-top: 13px;
padding-bottom: 13px;
}
.step-radio-label .step-radio-box.amazon .payment-img {
max-height: 22px;
}
.billing-radio-option .bring-up {
margin-top: -1px;
}
.billing-radio-option .step-radio-label:first-child .step-radio-box {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.billing-radio-option .step-radio-label:last-child .step-radio-box {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* Look it up CSS */
.sub-title {
margin-top: 0;
align-items: flex-start;
}
.sub-title .left {
padding-right: 30px;
}
h5 {
margin: 0 0 20px 0;
color: #182D40;
letter-spacing: 0.01em;
font: 600 16px / 19px sfProDisplay-Regular;
}
h5.mb30 {
margin-bottom: 30px;
}
.radio-option-row.three-col {
margin-bottom: 48px;
}
.radio-option-row.three-col .radio-option {
width: 33.3333%;
}
.security-number-wrapper {
/*display: none;*/
}
.select-option-wrapper {
/*display: none;*/
}
.social-security-wrapper {
padding: 30px 30px 10px 30px;
border: 1px solid #DCDCDC;
border-radius: 6px;
margin-top: 48px;
margin-bottom: 50px;
}
.social-security-wrapper h4 {
margin: 0 0 12px 0;
color: #1D2E59;
letter-spacing: 0.01em;
font: 100 15px / 19px sfProDisplay-Regular;
}
.security-number-wrapper .lock-icon {
position: absolute;
right: 13px;
display: block;
width: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.security-number-wrapper .form-group.with-animation .form-control {
padding-right: 30px;
}
.security-number-wrapper .form-group.with-animation .form-control:disabled {
background: #fff;
}
.security-number-wrapper .radio-option-row {
justify-content: space-between;
margin-bottom: 18px;
}
.security-number-wrapper .radio-option-row .radio-option {
width: 45%;
}
.security-number-wrapper .radio-option-row .radio-option.disabled, .disabled-div {
opacity: .5;
}
.security-number-wrapper h5 {
color: #1D2E59;
letter-spacing: 0.01em;
font: 600 16px / 50px sfProDisplay-Regular;
margin: 31px 0 0 0;
}
.ssn-yn-row .radio-input:disabled + .radio-box {
pointer-events: none;
opacity: .5;
}
.select-option-wrapper > .radio-option-row {
align-items: flex-end;
margin-bottom: 18px;
}
/* Media Queries */
@media only screen and (min-width: 768px) {
.form-content-wrapper > .sidebar-wrapper > .sidebar-content.order-sidebar {
padding-top: 20px;
padding-bottom: 100px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.form-content-wrapper > .steps-content-wrapper {
padding-right: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.content-inner > .steps-content {
margin: 0 auto;
}
.form-content-wrapper > .sidebar-wrapper {
padding-left: 30px;
}
.form-content-wrapper > .sidebar-wrapper.order-sidebar-wrapper {
padding-left: 20px;
}
.form-p-header p {
text-align: center;
}
.sidebar-content .shopper-approved-box .shopper-img {
margin-right: 10px;
width: 120px;
}
}
@media only screen and (max-width: 767px) {
.f-container {
padding: 0 20px;
}
.form-content-wrapper {
flex-direction: column;
}
.form-content-wrapper > .steps-content-wrapper {
width: 100%;
}
.form-content-wrapper > .steps-content-wrapper > .content-inner {
max-width: 100%;
}
.form-content-wrapper > .steps-content-wrapper > .content-inner > .steps-content {
margin: 0 auto;
}
.form-content-wrapper > .sidebar-wrapper {
width: 100%;
padding: 0 20px;
}
.form-content-wrapper > .sidebar-wrapper > .sidebar-content {
margin: 0 auto;
padding-top: 40px;
padding-bottom: 50px;
}
.form-p-header p {
text-align: center;
}
.form-p-footer-inner {
justify-content: center;
}
.form-p-footer-inner a {
margin-right: 25px;
}
/* Top Bar */
.top-bar .right {
display: none;
}
.top-bar p {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 9px;
line-height: 9px;
}
.top-bar .text {
margin-right: 20px;
}
.top-bar .top-bar-link {
font-size: 10px;
line-height: 12px;
margin-bottom: 2px;
}
.top-bar .top-bar-arrow {
margin-top: 2px;
}
.top-hidden-content {
padding-right: 70px;
}
/* Form Intro Page */
.form-intro-header {
padding: 10px 0;
}
.form-intro-content {
padding: 20px 0 120px 0;
}
.form-intro-content h1.with-img {
font-size: 34px;
line-height: 41px;
margin-bottom: 10px;
padding-right: 39px;
}
.form-intro-content p.description {
margin-bottom: 40px;
}
.form-intro-content .btn-form-green {
margin: 20px 0;
}
.form-intro-content .grey-text {
margin-bottom: 20px;
}
.form-intro-content .govt-site a {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #DCDCDC;
border-radius: 2px;
width: 100%;
padding: 11px 10px;
}
.form-intro-content .govt-site a svg {
display: block;
margin-left: 10px;
transition: all .2s ease-in;
}
.form-intro-content .govt-site a:hover svg, .form-intro-content .govt-site a:focus svg {
margin-left: 14px;
}
/* Steps Contents
Step - 1 */
.steps-content {
padding: 10px 0 100px 0;
}
.steps-content {
padding-bottom: 100px;
}
.form-logo-wrapper .right {
display: flex;
}
.steps-content .breadcrumb-wrapper a {
font-size: 10px;
line-height: 12px;
margin-right: 5px;
}
.steps-content .breadcrumb-wrapper svg {
margin-right: 10px;
}
.steps-content h1 {
font-size: 34px;
line-height: 34px;
letter-spacing: 0.01em;
margin-bottom: 10px;
}
.steps-content p.description {
margin-bottom: 40px;
font-family: sfProDisplay-Light;
}
.steps-content .form-button-wrapper {
margin-top: 30px;
flex-direction: column-reverse;
}
.steps-content .form-button-wrapper .btn-form-green {
height: 50px;
width: 100%;
margin-bottom: 30px;
}
.steps-content .form-button-wrapper .btn-return {
margin-right: 16px;
}
.steps-content .form-button-wrapper .btn-return svg {
margin-right: 10px;
}
.sidebar-content h6 {
font-size: 15px;
margin-bottom: 15px;
}
.sidebar-content .payment-img-box {
margin-bottom: 44px;
}
.sidebar-content .sidebar-slider-box .item {
padding-bottom: 40px;
}
.sidebar-content .sidebar-slider-outer .scooter-img {
left: -10px;
bottom: -34px;
}
.form-p-footer-inner a {
font-size: 10px;
line-height: 12px;
}
/* Step 2 */
.steps-content .form-plate-wrapper {
border: none;
padding: 0;
border-radius: 0;
margin-bottom: 30px;
}
.steps-content .form-plate-wrapper .form-plate-header {
border: 1px solid #2FABFF;
padding: 20px;
border-radius: 6px;
}
.steps-content .form-plate-wrapper .form-plate-header .btn-cancel-vehicle {
position: absolute;
right: 10px;
top: 10px;
}
.steps-content .form-plate-wrapper .form-plate-header .btn-cancel-vehicle span {
display: none;
}
.plate.small {
width: 80px;
height: 41px;
margin-right: 10px;
}
.plate.small h3 {
font-size: 17px;
line-height: 17px;
}
.plate.small .orange-wrapper img {
width: 33px;
}
.steps-content .form-plate-wrapper .form-plate-header .left h4 {
font-size: 16px;
line-height: 18px;
}
.steps-content .form-plate-wrapper h5.with-icon {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.steps-content .form-plate-wrapper h5.with-icon .text {
margin-right: 20px;
}
.steps-content .form-plate-wrapper h5.with-icon svg {
display: block;
}
/* Step 3 CSS */
.v-form-row {
flex-direction: column;
}
h3 {
margin-top: 50px;
}
.btn-clear-signature {
margin-bottom: 20px;
}
/* Step 4 CSS */
.order-status-box-mobile {
border: 1px solid #DCDCDC;
border-radius: 2px;
margin: 40px 0;
transition: all .2s ease-in;
}
.order-status-box-mobile.blue-bg {
border-color: #E2EFFB;
}
.order-status-box-mobile.blue-bg.opened {
border-color: #DCDCDC;
}
.order-status-box-mobile .order-status-header-mobile {
padding: 15px 16px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all .2s ease-in;
}
.order-status-box-mobile.blue-bg .order-status-header-mobile {
background: #E2EFFB;
}
.order-status-box-mobile.blue-bg.opened .order-status-header-mobile {
background: #fff;
}
.order-status-box-mobile .order-status-header-mobile h5 {
margin: 0;
color: #182D40;
letter-spacing: 0.01em;
font: 16px / 18px sfProDisplay-Regular;
display: flex;
align-items: center;
}
.order-status-box-mobile .order-status-header-mobile h5 svg {
display: block;
margin-left: 12px;
transform-origin: 50% 50%;
transition: all .2s ease-in;
}
.order-status-box-mobile.opened .order-status-header-mobile h5 svg {
transform: rotate(180deg);
}
.order-status-box-mobile .order-status-header-mobile p {
margin: 0;
color: #182D40;
letter-spacing: 0.01em;
font: 600 16px / 18px sfProDisplay-Regular;
}
.order-status-box-mobile .order-summary-box {
margin: 0;
padding: 30px 13px 18px 13px;
background: #FAFAFA;
border-top: 1px solid #DCDCDC;
/*display: none;*/
}
.order-status-box-mobile .order-summary-box .order-summary-header .right {
/*display: none;*/
}
.order-status-box-mobile .order-summary-box .order-summary-header {
margin-bottom: 30px;
}
.order-status-box-mobile .promo-code-wrapper {
margin-bottom: 30px;
}
/* Step 5 CSS */
.step-radio-label .step-radio-box {
padding-left: 43px;
padding-right: 16px;
}
.step-radio-label .step-radio-box .outer {
left: 15px;
}
.user-info-change-wrapper {
margin: 40px 0 50px 0;
padding: 5px 16px;
}
.user-info-change-wrapper .user-info-row .info {
flex-direction: column;
align-items: flex-start;
}
.user-info-change-wrapper h6 {
margin-bottom: 5px;
}
.step-radio-label .step-radio-box {
padding-top: 6px;
padding-bottom: 6px;
}
.step-radio-label .step-radio-box p span {
display: block;
font-size: 12px;
}
.steps-content.form-button-wrapper {
margin-top: 50px;
}
.step-radio-label .step-radio-box h5 {
margin-left: 10px;
min-width: 70px;
}
/* Step 6 CSS */
.payment-box .img-wrapper img {
max-height: 9px;
margin-left: 8px;
}
.payment-box .payment-details {
padding: 20px 16px;
}
.payment-details .next-img {
width: 120px;
margin-bottom: 15px;
}
}
@media only screen and (max-width: 575px) {
.f-container {
padding: 0 20px;
}
/* Look it up CSS */
.social-security-wrapper {
padding: 30px 20px 1px 20px;
}
.radio-option-row.three-col {
flex-direction: column;
}
.radio-option-row.three-col .radio-option {
width: 100%;
}
.security-number-wrapper .radio-option-row {
flex-direction: column;
}
.security-number-wrapper .radio-option-row .radio-option {
width: 100%;
}
.security-number-wrapper h5 {
margin: 8px 0 20px 0;
line-height: 19px;
text-align: center;
}
.select-option-wrapper > .radio-option-row {
flex-direction: column;
}
.select-option-wrapper > .radio-option-row > .radio-option {
width: 100%;
}
}
@media only screen and (max-width: 380px) {
.steps-content .breadcrumb-wrapper svg {
margin-right: 6px;
width: 5px;
height: 8px;
}
.steps-content .breadcrumb-wrapper svg path {
stroke-width: 1px;
}
}
[disabled] {
cursor: not-allowed !important;
}
.form-group p.required:after,
p.vehicle-type-title.required:after,
.custom-select-placeholder.required:after {
content: ' *';
color: red;
}
.text-sm {
font-size: 12px !important;
}
/* Address Confirmation Modal in Step 6 Page */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}