@font-face {
    font-family: "BrownStdBold";
    src: url("../fonts/BrownStdBold.otf");
}

@font-face {
    font-family: "BrownStdLight";
    src: url("../fonts/BrownStdLight.otf");
    /* Super Modern Browsers */
}

@font-face {
    font-family: "BrownStdRegular";
    src: url("../fonts/BrownStdRegular.otf");
    /* Super Modern Browsers */
}

@font-face {
    font-family: "ApercuProLight";
    src: url("../fonts/ApercuProLight.otf");
    /* Super Modern Browsers */
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    color: #444444;
}

a {
    color: #106eea;
    text-decoration: none;
}

    a:hover {
        color: #3b8af2;
        text-decoration: none;
    }

h1,
h2,
h3,
h4,
h5,
h6,
.profile .icon-box h4 a {
    font-family: "BrownStdBold", Roboto, sans-serif;
    color: #242731;
}

.checkbox {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-color: #bbbbbb;
}

#personalData p,
#personalData label,
.profile .icon-box p,
#loginData p,
#loginData label,
#personalData button,
#loginData button,
.table-view table thead th {
    font-family: "Poppins", sans-serif;
}

select {
    border: none !important;
    border-bottom: 1px solid #e2e4e5 !important;
    font-size: 18px !important;
    color: #ababab !important;
    font-family: "ApercuProLight", sans-serif !important;
}

.form-select {
    background-image: url("../images/down-arrow.png") !important;
    background-size: 10px 5px !important;
}

button {
    border: 1px solid #1e57f1;
    background: none;
    color: #1e57f1;
    font-size: 16px;
    border-radius: 4px;
    padding: 8px 24px;
}

.blue-bg-button {
    border: 1px solid #1e57f1;
    background: #1e57f1 !important;
    color: #fff !important;
    font-size: 16px;
    border-radius: 4px;
    padding: 8px 24px;
}

span,
#sample_table_info {
    font-size: 12px;
    font-family: "ApercuProLight", sans-serif;
    color: #575f6e;
}

#sample_table_info {
    font-size: 15px !important;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    background: #fff;
    transition: all 0.5s;
    z-index: 997;
    height: 107px;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

    #header.fixed-top {
        height: 70px;
    }

    #header .logo {
        font-size: 30px;
        margin: 0;
        padding: 0;
        font-weight: 600;
        letter-spacing: 0.8px;
    }

        #header .logo a {
            color: #222222;
        }

            #header .logo a span {
                color: #106eea;
            }

        #header .logo img {
            max-width: 100%;
        }

.scrolled-offset {
    margin-top: 70px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
    padding: 0;
}

    .navbar ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .navbar li {
        position: relative;
    }

    .navbar > ul > li {
        white-space: nowrap;
        padding: 10px 0 10px 28px;
    }

    .navbar a, .navbar a:focus {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 3px;
        font-size: 15px;
        font-weight: 600;
        color: #222222;
        white-space: nowrap;
        transition: 0.3s;
        position: relative;
    }

        .navbar a i, .navbar a:focus i {
            font-size: 12px;
            line-height: 0;
            margin-left: 5px;
        }

    .navbar > ul > li > a:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: -6px;
        left: 0;
        background-color: #106eea;
        visibility: hidden;
        width: 0px;
        transition: all 0.3s ease-in-out 0s;
    }

    .navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
        visibility: visible;
        width: 100%;
    }

    .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
        color: #106eea;
    }

    .navbar .dropdown ul {
        display: block;
        position: absolute;
        left: 28px;
        top: calc(100% + 30px);
        margin: 0;
        padding: 10px 0;
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        background: #fff;
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
        transition: 0.3s;
    }

        .navbar .dropdown ul li {
            min-width: 200px;
        }

        .navbar .dropdown ul a {
            padding: 10px 20px;
            font-weight: 400;
        }

            .navbar .dropdown ul a i {
                font-size: 12px;
            }

            .navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
                color: #106eea;
            }

    .navbar .dropdown:hover > ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
    }

    .navbar .dropdown .dropdown ul {
        top: 0;
        left: calc(100% - 30px);
        visibility: hidden;
    }

    .navbar .dropdown .dropdown:hover > ul {
        opacity: 1;
        top: 0;
        left: 100%;
        visibility: visible;
    }

@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }

    .navbar .dropdown .dropdown:hover > ul {
        left: -100%;
    }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
    color: #222222;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
}

    .mobile-nav-toggle.bi-x {
        color: #fff;
    }

@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block;
    }

    .navbar ul {
        display: none;
    }
}

.navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #1e57f1;
    transition: 0.3s;
    z-index: 999;
}

    .navbar-mobile .mobile-nav-toggle {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .navbar-mobile ul {
        display: block;
        position: absolute;
        top: 55px;
        right: 15px;
        bottom: 15px;
        left: 15px;
        padding: 10px 0;
        background-color: #fff;
        overflow-y: auto;
        transition: 0.3s;
    }

    .navbar-mobile a {
        padding: 10px 20px;
        font-size: 15px;
        color: #222222;
    }

    .navbar-mobile > ul > li {
        padding: 0;
    }

    .navbar-mobile a:hover:before, .navbar-mobile li:hover > a:before, .navbar-mobile .active:before {
        visibility: hidden;
    }

    .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
        color: #106eea;
    }

    .navbar-mobile .getstarted {
        margin: 15px;
    }

    .navbar-mobile .dropdown ul {
        position: static;
        display: none;
        margin: 10px 20px;
        padding: 10px 0;
        z-index: 99;
        opacity: 1;
        visibility: visible;
        background: #fff;
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    }

        .navbar-mobile .dropdown ul li {
            min-width: 200px;
        }

        .navbar-mobile .dropdown ul a {
            padding: 10px 20px;
        }

            .navbar-mobile .dropdown ul a i {
                font-size: 12px;
            }

            .navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
                color: #106eea;
            }

    .navbar-mobile .dropdown > .dropdown-active {
        display: block;
    }

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
}

    #preloader:before {
        content: "";
        position: fixed;
        top: calc(50% - 30px);
        left: calc(50% - 30px);
        border: 6px solid #106eea;
        border-top-color: #e2eefd;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        -webkit-animation: animate-preloader 1s linear infinite;
        animation: animate-preloader 1s linear infinite;
    }

@-webkit-keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/

.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #106eea;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

    .back-to-top i {
        font-size: 28px;
        color: #fff;
        line-height: 0;
    }

    .back-to-top:hover {
        background: #3284f1;
        color: #fff;
    }

    .back-to-top.active {
        visibility: visible;
        opacity: 1;
    }
/* Table Reflow Customized CSS for pseudo heads */
.reflow-table td:before {
    min-width: 50% !important;
    text-transform: uppercase;
    background: #f6f6f6;
    padding: 10px;
    margin-right: 10px;
}

#main .modal-body form .form-control:focus {
    color: inherit !important;
    background: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.table-view table thead th,
.table-view table tbody td {
    color: #575f6e;
    font-size: 12px;
    font-weight: 400;
    padding: 9px;
}

#warningDiv {
    color: #ff0000;
    font-size: 12px;
    line-height: 16px;
    display: none;
}

#personalData .btn,
#loginData .btn,
#legalAgreement .btn {
    border: 1px solid #1e57f1;
    background: none;
    color: #1e57f1;
    font-size: 16px;
    border-radius: 4px;
    padding: 8px 24px;
}

.modal-content span {
    font-size: 16px;
}

.form-control:focus,
.form-select:focus {
    color: inherit !important;
    background: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.dataTables_length,
.dataTables_filter,
.dataTables_paginate span {
    display: none !important;
}

.view-all-container {
    width: 73px;
    padding-right: 0;
    margin: 0;
}

.devider {
    width: 2px;
    padding: 0 10px;
}

.collapse-record {
    width: 155px;
}

.dataTables_info {
    width: 50%;
    float: left;
    font-size: 12px;
    margin-top: 5px;
}

.dataTables_paginate {
    width: 50%;
    float: right;
    text-align: right;
}

    .dataTables_paginate a {
        padding: 5px;
        font-size: 12px;
        cursor: pointer;
    }

@media screen and (max-width: 736px) {
    tr.even {
        margin: 20px 0;
        display: inline-block;
        width: 100%;
    }

        tr.even td {
            padding: 0px !important;
        }
}

@media screen and (min-width: 737px) {
    tr.even {
        /*    margin: 18px 0;*/
        /*    display: inline-block;*/
        width: 100%;
    }
}

#more {
    display: none;
}

/*.billing-details .modal .modal-dialog {
    align-items: flex-start;
}*/
.credit-card {
    display: none;
}

.bank-account {
    display: none;
}

#paymentInfo .cancel-btn {
    border: 1px solid #ababab;
    color: #ababab;
}

/*--------------------------------------------------------------
# Content Style
--------------------------------------------------------------*/

@media screen and (max-width: 600px) {
    .header-cont-for-mb {
        text-align: center;
    }

    #footer {
        background: url(../images/footer-bg.png) right bottom no-repeat;
        width: 100%;
        height: 117px;
        background-size: cover;
        position: static;
        bottom: 0;
    }

    .logo-header {
        width: 100%;
    }

    .loginHeader .logo {
        margin-left: 0 !important;
    }

    #headerLogin .container-fluid {
        padding-right: 0;
    }

    .personal-data-form {
        border-bottom: 1px solid #ccc;
        padding-bottom: 86px;
    }

    #main .modal-footer button {
        padding: 16px 20px;
    }
}

@media screen and (max-width: 736px) {
    #profile {
        padding: 24px 24px 70px 24px;
    }

    .personal-data-form {
        border-bottom: 1px solid #ccc;
        padding-bottom: 86px;
    }
}

@media screen and (min-width: 601px) and (max-width: 812px) {
    .logo-header {
        width: 45%;
    }

    .header-cont-for-mb .logo img {
        padding: 37px 0 33px 0 !important;
    }

    #personalData {
        padding-bottom: 35px;
    }
}

@media screen and (min-width: 640px) and (max-width: 823px) {
    #main .vehicle-box {
        width: 100% !important;
    }

    .personal-data-form {
        border-bottom: 1px solid #ccc;
        padding-bottom: 86px;
    }
}

@media screen and (max-width: 812px) {
    #main .billing-details .modal-dialog-scrollable .modal-content {
        max-height: 100%;
        overflow-y: auto;
    }

    #main .billing-details .modal-dialog-scrollable .modal-body {
        max-height: 100%;
        padding-left: 0;
        overflow-x: hidden;
        padding-right: 0;
        overflow-y: hidden;
    }

    #main .flex-pass-details .modal-dialog-scrollable .modal-content {
        max-height: 100%;
        overflow-y: auto;
    }

    #main .flex-pass-details .modal-dialog-scrollable .modal-body {
        max-height: 100%;
        padding-left: 0;
        overflow-x: hidden;
        padding-right: 0;
        overflow-y: hidden;
    }

    .personal-data-form {
        border-bottom: 1px solid #ccc;
        padding-bottom: 86px;
    }

    .table-top-cont {
        padding: 20px 0 !important;
        margin-top: 30px;
    }

    [data-aos-delay] {
        transition-delay: 0 !important;
    }

    .header-cont-for-mb {
        width: 100%;
    }

    .loginHeader .logo {
        padding: 0 !important;
    }

    .login-data {
        padding: 48px 24px !important;
    }

    .loginHeader .logo {
        margin-left: 30px;
    }

    #header {
        height: 75px;
        padding: 15px 10px;
    }

        #header img {
            width: 155px;
        }

        #header .container-fluid {
            padding: 0;
        }

    .header-cont {
        width: 100%;
    }

    .mobile-nav-toggle {
        display: block;
        font-size: 1.8em;
        color: #fff;
    }

    #legalAgreement {
        padding: 52px 17px;
        min-height: 402px;
    }

        #legalAgreement h1 {
            margin-bottom: 50px;
            font-size: 32px;
        }

    .withoutBgBtn button {
        background: none;
        color: #1e57f1;
        padding: 8px 24px;
    }

    #legalAgreement h4 {
        margin-bottom: 33px !important;
    }

    #legalAgreement ol {
        margin-bottom: 60px !important;
    }

    #legalAgreement p {
        color: #000;
    }

    #legalAgreement .icon-box {
        padding: 0 10px;
    }

    #createPassword {
        padding: 40px 10px;
    }

    .create-password-wrap p {
        color: #575f6e;
        line-height: 20px;
        margin: 16px 0 32px 0;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        margin: 35px 0;
    }

    .create-password-wrap .topSpace {
        text-align: center;
    }

        .create-password-wrap .topSpace h4 {
            font-size: 32px;
        }

    .create-password-wrap .icon-box .form-control {
        padding-left: 16px !important;
    }

    .create-password-wrap .icon-box .passwordBtn {
        text-align: center;
    }

    .success-msg {
        font-size: 12px;
        color: #34c759;
        line-height: 16px;
    }

    #main .modal-header .btn-close {
        top: 30px;
        right: 20px;
        background-position: 100%;
        margin-right: 0;
        font-size: 0.8rem;
    }

    #main .btn-close-white {
        filter: initial;
    }

    #main .modal-content {
        padding: 41px 24px;
    }

    .table-striped > tbody > tr:nth-child(2n + 1) > td,
    .table-striped > tbody > tr:nth-child(2n + 1) > th {
        background-color: #fff !important;
        padding: 0 !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .loginHeader .logo {
        padding: 35px;
    }

    .header-bg {
        height: 107px;
        width: 50%;
    }

    #legalAgreement .col-lg-3 {
        flex: auto !important;
        width: 25% !important;
    }

    #createPassword {
        max-width: 580px;
        margin: 0 auto;
    }

    .create-password-wrap .topSpace {
        margin-top: 68px !important;
    }

    .profile .icon-box,
    .create-password .icon-box,
    .login .icon-box,
    .legal-agreement .icon-box {
        padding: 37px 10px !important;
        margin-right: 11px !important;
        margin-bottom: 0px !important;
        margin-left: 0 !important;
    }

    #profile {
        padding: 60px 15px !important;
    }

    .logo {
        margin-left: 10px !important;
    }

    .table-striped > tbody > tr:nth-child(2n + 1) > td,
    .table-striped > tbody > tr:nth-child(2n + 1) > th {
        padding: 10px !important;
    }

    #main .billing-details .modal-dialog {
        max-width: 90% !important;
    }

    #main .billing-details .modal-dialog-scrollable .modal-body {
        max-height: 100%;
    }

    #main .billing-details .modal-footer button {
        padding: 16px 24px;
    }

    #main .flex-pass-details .modal-dialog {
        max-width: 90% !important;
    }

    #main .flex-pass .modal-dialog-scrollable .modal-body {
        max-height: 100%;
    }

    #main .flex-pass .modal-footer button {
        padding: 16px 24px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #main .billing-details .modal-dialog {
        max-width: 90% !important;
    }

    #main .billing-details .modal-dialog-scrollable .modal-body {
        max-height: 392px !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    #main .payment-info-cont .modal-footer {
        padding-top: 0;
    }

    #main .flex-pass-details .modal-dialog {
        max-width: 90% !important;
    }

    #main .flex-pass .modal-dialog-scrollable .modal-body {
        max-height: 100%;
    }

    #main .flex-pass .modal-footer button {
        padding: 16px 24px;
    }
}

.header-bg img {
    height: 100%;
}

#login label {
    font-size: 15px;
    color: #242426;
    font-family: "ApercuProLight", sans-serif;
    font-weight: 400;
}

#login .loginTxt p {
    font-size: 16px;
    font-family: "ApercuProLight", sans-serif;
}

    #login .loginTxt p a,
    .success-msg,
    .error-msg,
    #warningDiv {
        font-family: "Poppins", sans-serif;
    }

#login h4.wecometxt {
    position: absolute;
    left: 0;
    top: -54px;
    color: #fff;
    font-size: 32px;
}

input.form-control {
    border: none;
    border-bottom: 1px solid #e2e4e5;
    border-radius: 0;
    font-size: 18px;
    font-family: "Roboto", sans-serif;
    color: #242426;
    box-shadow: none;
    padding-left: 0;
}

#header,
#headerLogin {
    background-color: #1e57f1;
    transition: all 0.5s;
    z-index: 997;
}

.header-cont-for-mb .logo {
    width: 282px;
    display: inline-block;
}

    .header-cont-for-mb .logo img {
        padding: 90px 0 86px 0;
    }

#login .login-data {
    width: 100%;
    padding: 48px 12px 88px;
}

.blue-bg-button {
    padding: 12px 32px;
    height: auto;
}

.show-password {
    width: 25px;
    height: 20px;
    background: url(../images/passwordshow.png) right top no-repeat;
    position: absolute;
    top: 38px;
    right: 5px;
    z-index: 2;
    cursor: pointer;
}

.error-msg {
    color: #ff0000;
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
}

.confirm-password {
    color: green;
    font-size: 12px;
    line-height: 16px;
    display: block;
}

.table-striped > tbody > tr:nth-child(2n + 1) > td,
.table-striped > tbody > tr:nth-child(2n + 1) > th {
    background-color: #ffffff !important;
}

.table > :not(caption) > * > * {
    box-shadow: none !important;
}

.modal-backdrop.show {
    opacity: 1;
}
/*.billing-details .modal-dialog {
  max-width: 50% !important;
}*/
.modal-dialog-scrollable .modal-body {
    max-height: 500px;
    padding-left: 0;
    overflow-x: hidden;
    padding-right: 0;
}

#main .active-vehicle .modal-content,
#main .card-detail .modal-content,
#main .active-payment-profile .modal-content {
    padding: 37px 32px 20px 32px;
    overflow: initial;
}

.modal-header,
.modal-footer {
    border: none;
    padding: 0;
}

    .modal-header h4 {
        font-size: 20px;
    }

.modal-body p {
    font-family: "ApercuPro", Roboto, sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #000;
    font-weight: 400;
}

.modal-footer {
    margin-top: 20px;
}

    .modal-footer button {
        padding: 16px 28px;
        height: 57px;
        line-height: 15px;
        font-size: 18px;
        font-family: "BrownStdRegular", Roboto, sans-serif;
    }

.footer-bottom-txt {
    font-size: 18px;
    color: #000000;
    font-family: "BrownStdBold", Roboto, sans-serif;
    margin-top: 24px;
}

.modal-header .btn-close {
    margin-right: -50px;
    position: absolute;
    top: 0;
    right: 0;
    background-position: 0px 2px;
    margin-top: 0px;
    opacity: 1;
    font-weight: normal;
    font-size: 1.2rem;
}
/*.modal-dialog-scrollable .modal-content {
  overflow: inherit;
}*/
.modal-backdrop {
    background: rgb(30, 87, 241);
    background: linear-gradient( 180deg, rgba(30, 87, 241, 1) 19%, rgba(30, 87, 241, 0.09) 550% );
}

@media screen and (min-width: 1024px) and (max-width: 1580px) {
    #main .billing-details .modal-dialog {
        max-width: 85% !important;
    }

    #main .billing-details .modal-dialog-scrollable .modal-body {
        max-height: 440px;
        padding: 30px;
        padding-top: 0;
    }
    #main .flex-pass-details .modal-dialog {
        max-width: 90% !important;
    }

    #main .flex-pass .modal-dialog-scrollable .modal-body {
        max-height: 100%;
    }

    #main .flex-pass .modal-footer button {
        padding: 16px 24px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    #header {
        padding: 0 !important;
    }
}

@media screen and (min-width: 1581px) and (max-width: 1680px) {
    .modal-dialog-scrollable .modal-body {
        max-height: 440px;
        padding: 30px;
        padding-top: 0;
    }
}

@media screen and (min-width: 813px) {
    /*#main .btn-close-white {
    filter: initial;
  }*/
    #header {
        padding: 0 65px;
        background: #1e57f1 url(../images/header-bg.png) right top no-repeat;
        background-size: contain;
    }

    #main .billing-details .modal-dialog {
        max-width: 50%;
    }

    #billingDetails {
        width: 100%;
        z-index: 22222;
    }
    #main .flex-pass-details .modal-dialog {
        max-width: 50%;
    }

    #FlexPassDetails {
        width: 100%;
        z-index: 22222;
    }

    .form-wrapper {
        display: flex;
        max-width: 100%;
        justify-content: center;
    }

        .form-wrapper form {
            width: 100%;
            display: flex;
        }

    .form-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .billing-info-deatails-cont,
    .payment-info-cont {
        width: 49%;
        background: #fff;
        border-radius: 5px;
    }

        .billing-info-deatails-cont .modal-header,
        .payment-info-cont .modal-header {
            padding: 30px 30px 0 30px;
        }

    #main .billing-details .modal-content {
        background: none;
        border: none;
        overflow: initial;
    }

    #main .billing-details .modal-dialog-scrollable .modal-body {
        max-height: 600px;
        padding: 30px;
        margin-bottom: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .flex-pass-info-cont{
        width: 100%;
        background: #fff;
        border-radius: 5px;
    }

        .flex-pass-info-cont .modal-header{
            padding: 30px 30px 0 30px;
        }

    #main .flex-pass-details .modal-content {
        background: none;
        border: none;
        overflow: initial;
    }

    #main .flex-pass-details .modal-dialog-scrollable .modal-body {
        max-height: 600px;
        padding: 30px;
        margin-bottom: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }


    .payment-info-cont .modal-footer {
        padding: 30px;
        padding-top: 0;
    }

    .navbar,
    #profile {
        max-width: 1920px;
        margin: 0 auto;
    }

    .header-bg {
        height: 107px;
    }

    #header .logo {
        width: 235px;
        height: 50px;
    }

    .form-control:focus,
    .form-select:focus {
        color: inherit !important;
        background: none !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    .container-fluid {
        padding-right: 0 !important;
    }

    #legalAgreement .col-lg-3 {
        width: 25% !important;
    }

    #createPassword .col-lg-3 {
        flex: auto !important;
        width: 25% !important;
    }

    #createPassword {
        max-width: 580px;
        margin: 0 auto;
    }

    #legalAgreement {
        padding-bottom: 40px;
    }

    #headerLogin .logo {
        width: 300px;
        height: 46px;
        margin-left: 66px;
        margin-top: 53px;
    }

    .logo {
        margin-left: 60px;
    }

    .loginHeader .logo img {
        max-width: 100% !important;
    }

    header .logo img {
        max-width: 100%;
    }

    .modal {
        z-index: 1050 !important;
    }

    .garage-cont select {
        border: 1px solid #ced4da !important;
    }

    #profile .icon-box .termUse p {
        line-height: 28px;
        margin-bottom: 0;
    }

    .table-fixed tbody {
        max-height: 300px;
        overflow-y: auto;
        width: 100%;
    }

    .table-fixed thead,
    .table-fixed tbody,
    .table-fixed tr,
    .table-fixed td,
    .table-fixed th {
        display: block;
    }

        .table-fixed tbody td,
        .table-fixed tbody th,
        .table-fixed thead > tr > th {
            float: left;
            position: relative;
            min-width: 12.5%;
        }

            .table-fixed tbody td::after,
            .table-fixed tbody th::after,
            .table-fixed thead > tr > th::after {
                content: "";
                clear: both;
                display: block;
            }

    .table-view table thead th {
        background-color: #f4f4f4;
        border: none;
        text-align: left;
    }

    .table-view table thead th,
    .table-view table tbody td {
        color: #575f6e;
        font-size: 12px;
        font-weight: 400;
        padding: 9px;
    }

    .table-top-cont span {
        padding-top: 4px;
    }
    /*--------------------------------------------------------------
  
  # Login Style
  --------------------------------------------------------------*/
    .loginHeader {
        height: 60% !important;
    }

    .login {
        z-index: 11111;
    }

    .logo-header {
        width: 54%;
        position: fixed;
        right: 0;
        top: 0;
    }

    #login .login-data {
        width: 451px;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin-top: 8em;
        padding: 40px 32px 44px 32px;
    }

    .section-title p {
        font-size: 16px;
        width: 100%;
        text-align: left;
    }

    .section-title h3,
    .termUse a,
    .section-title h3 span {
        font-family: "BrownStdBold", Roboto, sans-serif;
    }

    .section-title p {
        font-family: "BrownStdLight", Roboto, sans-serif;
    }

    section {
        padding: 0 67px;
    }

    .section-title {
        text-align: left;
        width: 31%;
        margin: 0 auto;
        margin-top: 78px;
        margin-bottom: 115px;
    }

        .section-title h2 {
            font-size: 13px;
            letter-spacing: 1px;
            font-weight: 700;
            padding: 8px 20px;
            margin: 0;
            background: #e7f1fd;
            color: #242731;
            display: inline-block;
            text-transform: uppercase;
            border-radius: 50px;
        }

        .section-title h3 {
            margin: 16px 0 0 0;
            font-size: 32px;
            font-weight: 700;
        }

    .termUse {
        margin-top: 32px;
    }

        .termUse p {
            color: #000;
        }

        .termUse a {
            color: #007aff;
            padding-left: 5px;
        }

    .section-title h3 span {
        color: #106eea;
        font-weight: bold;
        font-size: 36px;
    }

    .section-title p {
        margin: 15px auto 0 auto;
        color: #575f6e;
    }
    /*--------------------------------------------------------------
  # profile
  --------------------------------------------------------------*/
    .select-options {
        margin-top: -60px;
        position: absolute;
    }

    #profileInfo {
        margin: 78px 0;
    }

    #profile .personal-data {
        padding-bottom: 15px;
    }

    #profile .mypament .icon-box {
        padding-bottom: 10px;
    }

    .profile .icon-box,
    .create-password .icon-box,
    .login .icon-box,
    .legal-agreement .icon-box {
        border: 1px solid #bbbfc1;
        padding: 25px;
        transition: all ease-in-out 0.3s;
        background: #fff;
        border-radius: 8px;
        margin: 12px;
    }

        .profile .icon-box h4,
        .profile .icon-box h4 a {
            font-size: 20px;
        }

        .profile .icon-box h4 {
            font-weight: 700;
            margin-bottom: 15px;
        }

            .profile .icon-box h4 a {
                color: #222222;
                transition: ease-in-out 0.3s;
            }

        .profile .icon-box p {
            line-height: 24px;
            font-size: 12px;
            color: #575f6e;
        }

    #personalData p {
        color: #575f6e;
        font-size: 12px;
    }

    #personalData label {
        font-size: 14px;
        color: #242426;
    }

    #personalData .btn,
    #loginData .btn,
    #legalAgreement .btn {
        border: 1px solid #1e57f1;
        background: none;
        color: #1e57f1;
        font-size: 16px;
        border-radius: 4px;
        padding: 8px 24px;
    }

    /*--------------------------------------------------------------
  # Cretae Password
  --------------------------------------------------------------*/
    .create-password-wrap .icon-box {
        padding: 32px;
    }

    .create-password-wrap .topSpace {
        margin-top: 168px;
    }

    .create-password-wrap button {
        background: #1e57f1;
        color: #fff;
        font-size: 16px;
        height: 48px;
        border-radius: 4px;
        padding: 12px 32px;
    }

    .repeat-password {
        margin-top: 0;
    }

    #createPassword .create-password-wrap p {
        color: #1e57f1;
        line-height: 20px;
        margin: 16px 0 32px 0;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
    }

    #createPassword .create-password-wrap input {
        padding-left: inherit;
    }

    .success-msg {
        font-size: 12px;
        color: #34c759;
        line-height: 16px;
        display: inline-block;
    }

    #warningDiv {
        color: #ff0000;
        font-size: 12px;
        line-height: 16px;
        display: none;
    }

    .error-msg {
        color: #ff0000;
        font-size: 12px;
        line-height: 16px;
        display: inline-block;
    }

    .success-msg .bi-check {
        font-size: 2em;
        float: left;
        margin-top: -5px;
    }

    .error-msg .bi-exclamation-octagon {
        font-size: 1.3em;
        float: left;
        margin-right: 5px;
    }
    /*--------------------------------------------------------------
  # Modals Style
  --------------------------------------------------------------*/

    /*--------------------------------------------------------------
  # Legal Agreements Style
  --------------------------------------------------------------*/
    .legal-agreement h1 {
        padding: 108px 0 79px 0;
        font-size: 32px;
    }

    .legal-agreement h4 {
        font-size: 20px;
        line-height: 28px;
    }

    #legalAgreement .icon-box {
        padding: 38px 57px;
        border: 1px solid #e2e4e5;
    }

    #legalAgreement ol {
        padding: 0;
        margin: 33px 28px;
    }

    #legalAgreement li {
        color: #575f6e;
    }

    #legalAgreement p {
        color: #000;
    }

    #legalAgreement li,
    #legalAgreement p {
        font-size: 16px;
        font-family: "ApercuProLight", sans-serif;
        line-height: 22px;
    }
}

@-webkit-keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error {
    color: #dc3545 !important;
}

.validation-summary-errors span {
    color: #dc3545 !important;
    font-size: 14px;
}

.validation-summary-errors ul {
    font-size: 14px;
    text-align: left;
    color: #dc3545 !important
}

.validation-summary-errors li {
    display: inline-flex;
}

.parker-portal-fill-parent{
    display: flex;
    flex-direction: column;
}
.parker-portal-fill-child{
    flex-grow: 1;
}

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

.text-red {
    color: rgba(191,27,33,1);
}