/****************************************
  Language flags
****************************************/
.toastr-success {
    background-color: #6ea122;
}
.toastr-error {
    background-color: #f60000;
}

.language-flag {
    display: inline-block;
    background-image: url('/img/flags/flags.f5b21281.png');
    background-repeat: no-repeat;
    height: 11px;
    width: 16px;
}

.language-flag-ca {
    background-position: -48px -22px;
}

.language-flag-de {
    background-position: -80px -33px
}

.language-flag-es {
    background-position: -16px -44px
}

.language-flag-fr {
    background-position: -144px -44px;
}

.language-flag-it {
    background-position: -208px -66px;
}

.language-flag-pt {
    background-position: -112px -121px;
}

.language-flag-nl {
    background-position: -80px -110px;
}

.language-flag-br {
    background-position: -192px -11px;
}

.language-flag-pl {
    background-position: -32px -121px;
}

.language-flag-ru {
    background-position: -224px -121px
}

.language-flag-gb {
    background-position: -176px -44px
}

.language-flag-tr {
    background-position: -16px -154px;
}

.language-flag-us {
    background-position: -144px -154px
}


/****************************************
  Navbar Language Dropdown
****************************************/

.language-dropdown a.dropdown-toggle .language-flag,
.language-dropdown ul.dropdown-menu li a span.language-flag{
    position: relative;
    top: 1px;
}

/****************************************
  Language Form Dropdown
****************************************/

div.language-form-dropdown,
div.form-dropdown{
    padding: 12px 0px 12px 14px !important;
    position: relative;
}

div.language-form-dropdown-minor-padding,
div.form-dropdown-minor-padding{
    padding: 6px 0px 6px 14px !important;
}

.language-form-dropdown ul.dropdown-menu:before,
.language-form-dropdown ul.dropdown-menu:after {
    display: none !important;
    border: none !important;
}

.language-form-dropdown ul.dropdown-menu li a span{
    text-transform: none;
}


/**************************************************
  Language Form Dropdown / General Form Dropdown
**************************************************/

.language-form-dropdown a.dropdown-toggle,
.form-dropdown a.dropdown-toggle{
    display: block;
    text-align: left;
}

.language-dropdown a.dropdown-toggle,
.language-dropdown a.dropdown-toggle:hover,
.language-form-dropdown ul.dropdown-menu li a,
.language-form-dropdown ul.dropdown-menu li a:hover,
.form-dropdown a.dropdown-toggle,
.form-dropdown a.dropdown-toggle:hover,
.form-dropdown ul.dropdown-menu li a,
.form-dropdown ul.dropdown-menu li a:hover{
    text-decoration: none;
}

.language-form-dropdown a.dropdown-toggle span.langname,
.form-dropdown a.dropdown-toggle span.itemName {
    color: #555;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    text-transform: none;
}

.language-form-dropdown a.dropdown-toggle span.fa,
.form-dropdown a.dropdown-toggle span.fa{
    float: right;
    margin: 3px 2px 0 0;
    width: 16px;
}

.language-form-dropdown ul.dropdown-menu,
.form-dropdown ul.dropdown-menu {
    box-shadow: none;
    width:100%;
    margin-top: 1px !important;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ccc;
}

.form-dropdown ul.dropdown-menu li a{
    padding: 5px 16px;
}

.form-dropdown a.dropdown-toggle span.itemSymbol,
.form-dropdown ul.dropdown-menu li a span.itemSymbol {
    color: #555;
    font-size: 14px;
    font-weight: 700;
}

.form-dropdown ul.dropdown-menu li a span.itemSymbol {
    margin-left: 4px;
}

.form-dropdown a.dropdown-toggle span.itemImg,
.form-dropdown ul.dropdown-menu li a span.itemImg {
    display: inline-block;
    background-repeat: no-repeat;
    height: 11px;
    width: 16px;
}
/****************************************
  Password validation
****************************************/

.passwordRules {
    position: relative;
    width: 100%;
    padding: 8px;
    font-size: .825em;
    border-radius: 0;
    display:none;
}

.passwordRules h5 {
    margin:0 0 10px 0;
    padding:0;
    font-weight:600;
}

ul.rulesChecklist {
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-column-width: 240px;
    -moz-column-width: 240px;
    column-width: 240px;
}

.invalid {
    background:url('/img/invalid.048e843a.png') no-repeat 0 5px;
    padding-left:22px;
    line-height:24px;
    color:#e3170d;
}
.valid {
    background:url('/img/valid.b3697f59.png') no-repeat 0 5px;
    padding-left:22px;
    line-height:24px;
    color:#23aa09;
}

.pendingValidation {
    line-height:24px;
    color:#EAAA00;
}

.pendingValidation > .loading-container > div {
    margin: 0;
}

.pendingValidation > .loading-container {
    margin-right: 6px;
}

.passwordRulesList{
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 8px 0 0 0;
}

.passwordRulesColumns2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.passwordRulesColumns3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.passwordRulesColumns4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}


/*******************************************************

      Passes ( transients, bookings and subscriptions)

*******************************************************/

.passes-top {
    display: block;
    width: 100%;
    height: 164px;
    padding: 0;
}

.passes-top .passes-header {
    width: 100%;
    height: 120px;
    padding: 30px 15px;
    opacity: 0.9;
    position: relative;
}

/***************************
    pass card header
 **************************/
.passes-top .passes-header.subscription-passes,
.passes-top .passes-time.subscription-passes{
    background-color: #a39594;
}

.passes-top .passes-header.booked-passes,
.passes-top .passes-time.booked-passes{
    background-color: #7785ac;
}

.passes-top .passes-header.active-passes,
.passes-top .passes-time.active-passes{
    background-color: #91b761;
}

.passes-top > .passes-header > .passes-title-symbol{
    width: 40px;
    position: relative;
    top: 5px;
    opacity: 0.2;
}

/***************************
    pass card title symbol
 **************************/
.passes-top .passes-header > .passes-title-symbol.subscription-title-symbol{
    border-top: 7px solid #fff;
}

.passes-top .passes-header > .passes-title-symbol.booking-title-symbol{
    border-top: 7px solid #fff;
}

.passes-top .passes-header > .passes-title-symbol.transient-title-symbol{
    border-top: 7px solid #fff;
}

.passes-top > .passes-header > h2{
    color: #fff !important;
    margin-bottom: 0;
    padding: 10px 0;
    font-weight: 600;
    max-width: 70%;
    height: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.passes-top > .passes-header > .passes-header-icon {
    height: 56px;
    width: 70px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
}

.passes-top > .passes-header > .passes-header-icon.st-seasonal {
    background-image: url('/img/passes/ic_subscription.70aac859.png');
}
.passes-top > .passes-header  > .passes-header-icon.st-booking {
    background-image: url('/img/passes/ic_booking.f0941e86.png');
}
.passes-top > .passes-header  > .passes-header-icon.st-transient {
    background-image: url('/img/passes/ic_transient.cba8faf7.png');
}

.passes-top > .passes-status {
    color: #fff;
    font-weight: 400;
    padding: 10px 15px;
    width: 100%;
    opacity: 0.75;
    height: 44px;
    position: relative;
}

/***************************
    pass card status
 **************************/
.passes-top .passes-status.subscription-passes{
    background-color: #a39594;
}

.passes-top .passes-status.booked-passes{
    background-color: #7785ac;
}

.passes-top .passes-status.active-passes{
    background-color: #91b761;
}

.passes-top > .passes-status > .passes-status-icon {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: no-repeat center;
}

.passes-top > .passes-status > .passes-status-icon.st-booked {
    background-image: url('/img/passes/ic_st_time.c62d00db.png');
}

.passes-top > .passes-status > .passes-status-icon.st-parked {
    background-image: url('/img/passes/ic_st_parked.56a4cd9f.png');
}
.passes-top > .passes-status > .passes-status-icon.st-success {
    background-image: url('/img/passes/ic_st_exit.60a529ae.png');
}
.passes-top > .passes-status > .passes-status-icon.st-payment-success {
    background-image: url('/img/passes/ic_st_paid.c4c1df31.png');
}
.passes-top > .passes-status  > .passes-status-icon.st-error {
    background-image: url('/img/passes/ic_st_error.27606e09.png');
}

.passes-top > .passes-status  > .passes-status-icon.st-warning {
    background-image: url('/img/passes/ic_st_warning.7800ac48.png');
}

.passes-top > .passes-status > .passes-status-font-icon{
    font-size: 20px;
}

.passes-top > .passes-status > span {
    font-size: 16px;
    font-style: italic;
    letter-spacing: 0.03em;
    font-weight: 400;
}

.openedge-currencies-select > div {
    margin: 10px 0 0 !important;
}

/***************************
    pass card footer
 **************************/
.passes-footer{
    height: 36px;
}

.passes-footer.subscription-passes{
    background: #a39594 url("/img/passes/subscription_footer.854b0a17.png");
}

.passes-footer.booked-passes{
    background: #7785ac url("/img/passes/booking_footer.8b0e13dc.png");
}

.passes-footer.active-passes{
    background: #91b761 url("/img/passes/transient_footer.ba456f3c.png");
}


/******************************************
  Alert
******************************************/
.alert {
    background-color: #FFECEC;
    border: medium none;
    display: block;
    overflow: hidden;
    margin: 0 0 21.7391px;
    padding: 1em 1em 1em 4em;
    position: relative;
    font-size: 1em;
    border-radius: 0;
    line-height: 24px;
}

.alert-no-margin{
    margin: 0 !important;
}

.alert-ico {
    color: #DF6060;
    bottom: 0;
    font-style: normal;
    font-weight: normal;
    width: 4em;
    height: 20px;
    left: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.alert.alert-success {
    background: #E0F2D9;
}

.alert-success {
    color: #3c763d;
}

.alert.alert-success .close,
.alert.alert-success .alert-ico,
.alert.alert-success p {
    color: #58A839 !important;
}

.alert.alert-danger{
    background-color: #FFECEC;
}

.alert-danger {
    color: #a94442;
}

.alert.alert-danger .close,
.alert.alert-danger .alert-ico,
.alert.alert-danger p {
    color: #DF6060 !important;
}

.alert.alert-info {
    background: #ECF1F9;
}

.alert-info{
    color: #31708f;
}

.alert.alert-info .close,
.alert.alert-info .alert-ico,
.alert.alert-info p {
    color: #3D6EBF !important;
}

.alert.alert-warning {
    background: #FDF9DF;
}

.alert-warning {
    color: #8a6d3b;
}

.alert.alert-warning .close,
.alert.alert-warning .alert-ico,
.alert.alert-warning p {
    color: #EB9B0A !important;
}

.statusMessageText{
    float:left;
    display: inline-block;
    width: 82%;
    font-size: 14px;
    line-height: 22px;
    margin: 0;
}

.statusTextFullWidth{
    width: unset !important;
}

.statusTextExtraTopMargin{
    margin-top: 6px;
}

.statusMessageActionBtn{
    margin: 5px 20px 5px 0;
    display: inline-block;
}

.alert .alertClose.close {
    font-size: 20px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    opacity: 1;
    color: #F00;
    background: transparent center;
    box-shadow: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

/*********************************
  Loading
******************************/

.loading-container {
    display: inline-block;
}

.loader-container-horizontally-centered{
    position: relative;
    left: 50%;
}

.loading-icon {
    display: inline-block;
    cursor: wait;
    vertical-align: middle;
    background-image: url("/img/loading.01e5e599.gif");
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0px;
    background-size: cover;
}

.loading-icon-xxs {
    margin: 0 0 0 10px;
    width: 16px;
    height: 16px;
}

.loading-icon-xs {
    margin: 0 0 0 15px;
    width: 24px !important;
    height: 24px !important;
}

.loading-icon-sm {
    margin: 0 0 0 15px;
    width: 32px;
    height: 32px;
}

.loading-icon-md {
    margin: 0 0 0 25px;
    height: 48px;
    width: 48px;
}

.loading-icon-lg {
    margin: 0 0 0 25px;
    height: 64px;
    width: 64px;
}

.loading-container-float-right{
    float:right;
}

.loading-icon-grey{
    background-image: url("./img/loading_grey.ecf1d381.gif");
    margin-right:15px;
}

.loading-text{
    display: inline-block;
    margin: 0 0 0 15px;
}

.loading-text-xs{
    font-size: 12px;
}

.loading-text-sm{
    font-size: 14px;
}

.loading-text-md{
    font-size: 16px;
}

.loading-text-lg{
    font-size: 18px;
}

.centeredLoaderWrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000 !important;
}

.centeredLoaderWrapper .centeredLoaderContainer{
    position: relative;
    width: 100%;
    height: 100%;
}

.centeredLoaderWrapper .centeredLoaderContainer .centeredLoader{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    vertical-align: top;
    display: inline-block;
}


.centeredLoaderWrapper .centeredLoaderContainer .centeredLoader > .centeredLoaderText {
    font-family: inherit;
    font-size: 0.88em;
    text-transform: uppercase;
    color: #ccc;
    font-weight: 600;
    letter-spacing: 0.2em;
    width: 200px;
    margin-top:10px;
}

.walletRechargeWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    opacity: 80%;
}

.walletRechargeIcon {
    margin: 0!important;
    margin-bottom: 150px!important;
}

/****************************************
  Overlay Message
****************************************/

.overlayMessageWrapper {
    width: 100%;
    height: 45px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.overlayMessageWrapper .overlayMessageContainer {
    width: auto;
    background-color: #000;
    margin: 0 auto !important;
    font-size: 18px;
    color: #FFF !important;
    border: 2px #000;
    border-radius: 30px;
    -moz-border-radius: 25px;
    opacity: .7;
    max-width: 400px;
    position: relative;
}

.overlayMessageWrapper .overlayMessageContainer .overlayMessageText {
    display: inline-block;
    padding: 10px 40px 10px 30px;
}

.overlayMessageWrapper .overlayMessageContainer .overlayMessageCloseBtn {
    display: -webkit-box;
    font-size: 30px;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    font-weight: 400;
    /* transition: all 0.25s ease-in-out;*/
}

/****************************************
  Tables validation
****************************************/

.buttonSeparator {
    margin-bottom: 5px;
}

/****************************************
  Form error block
****************************************/

form .form-block-error-extended{
    padding: 0 0 10px 0;
    margin-top: -15px;
}

form .form-block-error .help-block {
    margin-top: 8px;
    margin-left: 2px;
    color: #e94442;
    font-size: 12px;
}

/****************************************
  Login version
****************************************/

.vrsn_login {
    display: inline-block;
    padding: 3px 9px;
    margin: 0 0 0 8px;
    font-size: 11px;
    font-weight: 300;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: sub;
    background: #6ea122;
    color:#fff;
}

/****************************************
  Modal Message
****************************************/

.modalMessage{
    z-index: 10060 !important;
}

.modalMessageHeader h3{
    font-weight: 500 !important;
}

.modalMessageHeader .modal-title img,
.modalMessageBody img{
    margin-right: 10px;
}

.modalMessageText{
    line-height: 24px;
}

@media (max-width: 991px){
    .modalMessage .modal-dialog {
        width: auto !important;
    }
}
/***************************************
    Checkbox
***************************************/

.uniformCheckboxLabel{
    position: relative;
    top: 1px;
    left: 4px;
}
.checkbox-left-label {
    margin-right: 10px;
}



/***************************************
    Session management
***************************************/
.currentSessionDiv{
    border: 1px solid #ddd;
    margin-bottom: 20px;
    border-radius: 3px;

}

.sessionsOfAPlatformSection .panel-heading{
    cursor: pointer;
}

.currentSessionDiv,
.sessionSectionBody{
    padding: 15px 20px;
    font-size: 14px;
}

.sessionSectionBodyBottomMargin{
    border-bottom: 1px solid #eee;
}

.sessionSectionBodyRightMargin{
    border-right: 1px solid #eee;
}

.currentSessionDiv .form-group-inline-flex,
.sessionSectionBody .form-group-inline-flex{
    padding: 5px 0;
}

.currentSessionDiv .form-group-inline-flex i.fa,
.sessionSectionBody .form-group-inline-flex i.fa{
    margin-right:6px;
}

.accordionTitle{
    font-weight: 500;
}

.sectionTitle{
    font-weight: 600;
    margin: 0 0 10px 1px;
}

.col-sessionLabel{
    margin-right: 10px;
    margin-bottom: 0;
    color: #555;
}

.currentSessionDiv .col-sessionLabel,
.sessionSectionBody .col-sessionLabel{
    width: 130px
}

.col-sessionValue{
    margin-bottom: 0;
    color: #777;
}

.col-sessionLabel,
.col-sessionValue{
    position: relative;
}

.sessionLabel{
    font-weight: 600;
}

.sessionBtn{
    margin: 15px 5px 10px 0;
    padding: 6px 20px 6px 20px;
}

@media (max-width: 767px) {
    .col-sessionLabel,
    .col-sessionValue{
        width: 100% !important;
        float: left;
    }
}

/****************************************
  Ticket Management
****************************************/

.ticketHistory{
    padding: 10px 20px 10px 20px;
}

.ticketHistory dl{
    margin-bottom: 0;
}

.ticketHistory i{
    padding: 5px 0;
}

.ticketHistory dt,
.ticketHistory dd{
    padding: 2px 0;
}

.ticketHistory dt {
    display: inline-block;
    margin-left: 5px;
    font-weight: bold;
    min-width: 150px;
}

.ticketHistory dd {
    display: inline-block;
    text-align: right;
    margin-left: 25px;
}

/****************************************
  Form customization
****************************************/


.form-group-inline {
    display: inline;
    width: 100%;
}

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

.form-group-grid {
    display: grid;
}

.form-group-grid-justify-center{
    justify-items: center;
}

.form-group-inline-flex div.intl-tel-input {
    width: 70%;
}

.form-group-inline-flex button{
    width: 30%;
    height: 45px;
    margin: 0 0 0 8px;
    padding: 13px 2px 13px 2px;
}

.form-group .form-group-inline-city-region{
    width: 70%;
    display: inline-block;
    float: left;
    padding-right: 15px;
}

.form-group .form-group-inline-zip-code{
    width: 30%;
    display: inline-block;
}

/***************************************
    Emails management
***************************************/
.modifyEmailBtn{
    float: right;
    margin-right: 12px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    border: none;
    background: transparent;
}

.otherEmailsBlock {
    /*padding: 15px 10px 10px 10px;*/
    padding: 18px 15px 10px 15px;
    border-color: #dde3ec;
    border-width: 0 1px 1px 1px;
    border-style: none solid solid solid;
}


.otherEmailsBlock div.otherEmailsBlockText{
    margin-bottom: 15px;
    color: #555;
    letter-spacing: 0.04em;
}

.otherEmailsBlock .otherEmailBlock{
    padding: 6px 0;
}

.otherEmailsBlock .otherEmailBlock .deleteOtherMail{
    margin-left: 15px;
}

.otherEmailsBlock .addOtherMail{
    margin-left: 25px;
}

.otherEmailsBlock button {
    height: 35px;
    padding: 6px 15px;
    margin: 10px 10px 10px 0;
}

.complex-user-emails-btn{
    padding: 6px 20px !important;
}

.userEmailsModalWindow .modal-dialog{
    width: 400px;
}

/***************************************
    Box with operation result message
***************************************/
.box-message{
    text-align: center;
    padding: 25px 0;
    line-height: 40px;
    font-weight: 400;
    border: 1px solid #6BA539;
    border-radius: 6px;
}

.box-message .box-icon{
    font-size: 40px;
}

.box-message .box-text{
    font-size: 22px;
}


@media (max-width: 991px){
    .userEmailsModalWindow .modal-dialog{
        width: auto;
    }

    .userEmailsModalWindow .modal-dialog .alert{
        width: auto;
        max-width: 200px;
    }
}

@media (min-width:768px) and (max-width:1200px){
    .complex-user-emails-btn-view-other-emails{
        margin-top: 6px;
    }
}

/***************************************
    General
***************************************/
.portlet-subtitle{
    padding: 15px 20px 10px 0 !important;
}

.portlet-subtitle > .caption > .caption-subject{
    font-size: 15px !important;
}

.three-dots-end {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

.center-align{
    text-align: center;
}

.left-align{
    text-align: left;
}

.right-align{
    text-align: right;
}

.flex {
    display: flex;
}

.inline-flex {
    display:inline-flex;
}

.flex-self-align-center {
    display: flex;
    align-self: center;
}

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

.flex-container-row-reverse{
    display: flex;
    flex-direction: row-reverse;
}

.flex-container-center-align {
    display: flex;
    align-items: center;
}

.flex-container-column{
    display: flex;
    flex-direction: column;
}

.flex-container-row {
    display: flex;
    flex-direction: row;
}

.flex-align-items-start {
    display: flex;
    align-items: start;
}

.flex-align-items-center {
    display: flex;
    align-items: center;
}

.flex-justify-content-space-evenly {
    display: flex;
    justify-content: space-evenly;
}


.flex-align-items-justify-content-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-align-items-end {
    display: flex;
    align-items: end;
}

.fex-justify-start {
    display: flex;
    justify-content: flex-start;
}f

.left-float{
    float: left;
}

.right-float{
    float: right;
}

.height-34px{
    height: 34px;
}

.height-35px{
    height: 35px;
}

.gap-10{
    gap: 10px;
}

.no-arrow-input,
.no-arrow-input::-webkit-outer-spin-button,
.no-arrow-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}

.input-group-prepend-order{
    order: 0;
}

.input-group-append-order{
    order: 1;
}

.input-group .input-group-prepend .input-group-text,
.input-group .input-group-append .input-group-text,
.input-group .input-group-prepend-append .input-group-text{
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.lightBold{
    font-weight: 400;
}

.fontWeightNormal{
    font-weight: normal;
}

.bold{
    font-weight: bold;
}

.redColor{
    color: #e94442 !important;
}

.greenColor{
    color: green;
}

.color-light-grey{
    color: #999;
}

.no-rounded{
    border-radius: 0;
}

.no-border{
    border: none !important;
}

.disabledEl {
    pointer-events:none;
    opacity:0.6;
}

.visibleElem {
    display: block !important;
}

.cursorPointer {
    cursor: pointer;
}

.default-cursor{
    cursor: default !important;
}

.disabledEl {
    pointer-events:none;
    opacity:0.6 !important;
}

.full-width{
    width: 100% !important;
}

.auto-width{
    width: auto !important;
}

.width-25percent{
    width: 25% !important;
}

.width-40percent{
    width: 40% !important;
}

.width-50percent{
    width: 50% !important;
}


.width-70percent{
    width: 70% !important;
}

.word-break-all{
    word-break: break-all;
}

.word-break-word{
    word-break: break-word;
}

.white-space-no-wrap {
    white-space: nowrap;
}

.white-space-preline {
    white-space: pre-line;
}

.half-width{
    width: 50%;
}

.qrcode-container{
    margin: 0 auto;
    width: 140px;
    height: 140px;
}

.width-30{ width:30px;}
.width-20percent{ width: 20%;}
.width-80percent{ width: 80%;}
.width-100{ width: 100% !important;}
.width-auto{width: auto;}

.max-width-400 {
    max-width: 400px;
}

.max-width-580 {
    max-width: 580px;
}

.font-500{ font-weight: 500;  }
.font-600{font-weight: 600;  }

.no-padding{ padding: 0 !important; }
.padding-30 { padding: 30px}

.padding-20{
    padding: 20px
}


.padding-top-0{padding-top: 0;}
.padding-top-1{padding-top: 1px;}
.padding-top-5{padding-top: 5px;}
.padding-top-6{padding-top: 6px;}
.padding-top-7{padding-top: 7px;}
.padding-top-8{padding-top: 8px;}
.padding-top-8{padding-top: 8px;}
.padding-top-10{padding-top: 10px;}
.padding-top-15{padding-top: 15px;}
.padding-top-20{padding-top: 20px;}
.padding-top-25{padding-top: 25px;}
.padding-top-30{padding-top: 30px;}

.padding-bottom-0{padding-bottom: 0;}
.padding-bottom-5{padding-bottom: 5px;}
.padding-bottom-6{padding-bottom: 6px;}
.padding-bottom-8{padding-bottom: 8px;}
.padding-bottom-10 {padding-bottom: 10px; }
.padding-bottom-15 {padding-bottom: 15px; }
.padding-bottom-20 {padding-bottom: 20px; }
.padding-bottom-25 {padding-bottom: 25px; }
.padding-bottom-30 {padding-bottom: 30px; }
.padding-bottom-40 {padding-bottom: 40px; }
.padding-bottom-50 {padding-bottom: 50px !important;}

.padding-left-0{padding-left: 0;}
.padding-left-10{padding-left: 10px;}
.padding-left-15{padding-left: 15px;}
.padding-left-20{padding-left: 20px;}
.padding-left-24{padding-left: 24px;}
.padding-left-25{padding-left: 25px;}

.padding-right-0{ padding-right: 0;}
.padding-right-30{ padding-right: 30px;}

.padding-top-bottom-2 { padding: 2px 0 !important;}
.padding-top-bottom-4{ padding: 4px 0;}
.padding-top-bottom-6{ padding: 6px 0;}
.padding-top-bottom-8{ padding: 8px 0;}
.padding-top-bottom-10{ padding: 10px 0;}
.padding-top-bottom-12{ padding: 12px 0;}

.padding-left-right-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.padding-left-right-20{
    padding-left: 20px;
    padding-right: 20px;
}

.padding-all-20{
    padding: 20px;
}

.no-margin{
    margin: 0 !important;
}

.column-gap-10{column-gap: 10px;}

.margin-top-negative2{margin-top: -2px; !important;}
.margin-top-negative3{margin-top: -3px; !important;}
.margin-top-negative15{margin-top: -15px; !important;}
.margin-top-negative20{margin-top: -20px; !important;}
.margin-top-negative25{margin-top: -25px; !important;}
.margin-top-negative30{margin-top: -30px; !important;}
.margin-top-negative45{margin-top: -45px; !important;}
.margin-top-negative50{margin-top: -50px; !important;}

.margin-top-0{margin-top: 0 !important;}
.margin-top-1{margin-top: 1px !important;}
.margin-top-4{margin-top: 4px !important;}
.margin-top-5{margin-top: 5px !important;}
.margin-top-8{margin-top: 8px !important;}
.margin-top-10{margin-top: 10px !important;}
.margin-top-15{margin-top: 15px !important;}
.margin-top-20{margin-top: 20px !important;}
.margin-top-24{margin-top: 24px !important;}
.margin-top-25{margin-top: 25px !important;}
.margin-top-26{margin-top: 26px !important;}
.margin-top-30{margin-top: 30px !important;}
.margin-top-35{margin-top: 35px !important;}
.margin-top-40{margin-top: 40px !important;}

.margin-left-0{margin-left: 0px !important;}
.margin-left-3{margin-left: 3px !important;}
.margin-left-5{margin-left: 5px !important;}
.margin-left-10{margin-left: 10px !important;}
.margin-left-15{margin-left: 15px !important;}
.margin-left-20{margin-left: 20px !important;}
.margin-left-25{margin-left: 25px !important;}
.margin-left-30{margin-left: 30px !important;}

.margin-right-5{margin-right: 5px !important;}
.margin-right-6{margin-right: 6px !important;}
.margin-right-15{margin-right: 15px !important;}
.margin-right-20{margin-right: 20px !important;}
.margin-right-25{margin-right: 25px !important;}
.margin-right-30{margin-right: 30px !important;}
.margin-right-40{margin-right: 40px !important;}
.margin-right-50{margin-right: 50px !important;}
.margin-right-55{margin-right: 55px !important;}

.margin-bottom-0{margin-bottom: 0 !important;}
.margin-bottom-5{margin-bottom: 5px !important;}
.margin-bottom-10{margin-bottom: 10px !important;}
.margin-bottom-15{margin-bottom: 15px !important;}
.margin-bottom-20{margin-bottom: 20px !important;}
.margin-bottom-25{margin-bottom: 25px !important;}
.margin-bottom-30{margin-bottom: 30px !important;}
.margin-bottom-35{margin-bottom: 35px !important;}
.margin-bottom-40{margin-bottom: 40px !important;}

.border-top-default{ border-top: 1px solid #eee;}
.border-bottom-default{ border-bottom: 1px solid #eee;}

.display-table {
    display: table;
}

.truncatedElement {
    white-space: nowrap;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    left: 0;
    width: 100%;
    -webkit-transition: left 3s, width 3s;
    -moz-transition: left 3s, width 3s;
    transition: left 3s, width 3s;
}


/* Media Queries
-------------------------------------------------------------------*/

@media all and (max-width: 320px){
    .passes-top > .passes-status > span{
        font-size: 14px;
    }

    .passes-message .pass-item-message {
        width: 65%;
    }

    .passes-message .pass-item-message > div{
        font-size: 13px;
    }

    .passes-message .pass-item-message .pass-item-message-title{
        margin-bottom: 6px;
    }

    .passes-top > .passes-header > h2{
        max-width: 65%;
    }
}

@media all
and (min-device-width : 320px)
and (max-device-width : 375px) {
    .passes-message .pass-item-message {
        width: 70%;
    }

    .passes-message .pass-item-message > div{
        font-size: 13px;
    }

    .passes-message .pass-item-message .pass-item-message-title{
        margin-bottom: 6px;
    }
}


@media all and (max-width: 425px) {

    .overlayMessageWrapper .overlayMessageContainer {
        width: 90%;
    }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  {

    .passes-message .pass-item-message{
        width: 85%;
    }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {

    .passes-message .pass-item-message{
        width: 70%;
    }

    .passes-message .pass-item-message .pass-item-message-title{
        margin-bottom: 6px;
    }
}

@media all
and (min-device-width : 1025px)
and (max-device-width : 1440px){

    .passes-message .pass-item-message{
        width: 75%;
    }
}

/* START MODAL CREDIT CARD STYLES*/
.circle-icon {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255, 0.4);
    width: 35px;
    height: 35px;
    display: inline-block;
    text-align: center;
    line-height: 31px;
    margin-left: 1px;
    margin-right: 1px;
    color: rgba(0, 0, 0, 0.4);
}

.circle-icon:hover, .circle-icon.active {
              border: 2px solid rgba(255,255,255, 0.5);
              background: #FFF;
              color: #6BA539 !important;
}
.circle-icon i:hover {
    color: #6BA539 !important;
}




.circle-icon-bordered.edit {
    color: #EE7F01;
}

.circle-icon-bordered.add {
    color: red;
}

.circle-icon-bordered.add.inactive {
    color: #ccc;
    pointer-events: none;
    cursor: default;
}

.creditCardHeaderClass {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 20px;
}

.btn.btn-logout {
    background: lightgray;
}

.circle-icon-bordered {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #dddddd;
    width: 35px;
    height: 35px;
    display: inline-block;
    text-align: center;
    line-height: 31px;
    margin-left: 1px;
    margin-right: 1px;
    color: rgba(0, 0, 0, 0.4);
}

.circle-icon-bordered:hover {
    border: 2px solid #c8c8c8;
 }
.circle-icon-bordered.default {
    color: #6BA539;
 }
.circle-icon-bordered.edit {
    color: #EE7F01;
 }
.circle-icon-bordered.remove {
     color: #ed2a21;
 }
body .modal.edit-credit-card-modal {
    z-index: 99998 !important;
}
.btn-rounded {
    border-radius: 30px;
}
.switch-container {
    float: right;
}
.switch-container-center {
    text-align: -webkit-center;
}

.switch-container input[type=checkbox], input[type=radio] {
    margin: 4px 2px 0 !important;
}

.switch-container #receiptPaymentSwitch:before,
.switch-container .blueBadgeSwitch:before,
.switch-container #switch:before {
    content:"";
    position:absolute;
    top:-6px;
    left:-5px;
    height:26px;
    width:26px;
    border-radius:50%;
    cursor: pointer;
    display:block;
    background:#6ba539;
    border:none;
    z-index:2;
    box-shadow:inset 0 0 0 40px #acacac,0 1px 2px 0 rgba(0,0,0,0.1);
    transition:all 250ms ease-in 0s, left 250ms ease-in-out 0s;
}

.custom-switch,
.custom-switch:active {
    position: absolute;
    opacity: 0;
}

.switch-label {
    display: block;
    opacity: 1 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 15px;
    position: relative;
    height: 30px;
    width: 70px;
    cursor: pointer;
    /*border-radius*/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.switch-label:before {
    content: '';
    display: block;
    position: absolute;
    height: 15px;
    width: 15px;
    top: 7.5px;
    left: 7.5px;
    background: #CCCCCC;
    /*border-radius*/
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.switch-label:after {
    content: attr(data-off);
    position: absolute;
    top: 0;
    left: 0;
    padding: 7.5px;
    height: 100%;
    width: 65px;
    text-align: right;
    color: #CCCCCC;
    white-space: nowrap;
}

.custom-switch:checked + .switch-label:before {
    background-color: white;
    left: calc(100% - 22px);
}

.custom-switch:checked + .switch-label:after {
    content: attr(data-on);
    color: white;
    left: 7.5px;
    text-align: left;
    width: 42.5px;
}

.switch-checkbox + .switch-label {
    /*box-shadow*/
    -webkit-box-shadow: 0 0 0 2px #CCCCCC;
    -moz-box-shadow: 0 0 0 2px #CCCCCC;
    box-shadow: 0 0 0 2px #CCCCCC;
}

.switch-checkbox:checked + .switch-label {
    /*box-shadow*/
    -webkit-box-shadow: inset 0 0 0 18px #6ba539, 0 0 0 2px #6ba539;
    -moz-box-shadow: inset 0 0 0 18px #6ba539, 0 0 0 2px #6ba539;
    box-shadow: inset 0 0 0 18px #6ba539, 0 0 0 2px #6ba539;
}

.switch-checkbox:disabled + .switch-label {
    opacity: 0.5!important;
}
.loading-container.creditModalCentered {
    display: flex;
    justify-content: center;
}
/* END MODAL CREDIT CARD STYLES*/

/***********************************

    Recharge Modal

************************************/

.recharge-modal-header .modal-title {
    font-size: 1.75em;
    font-weight: 600;
}

.recharge-modal-container {
    margin-top: 20px;
}

.recharge-modal-container p {
    font-style: italic;
}
.recharge-modal-container span {
    font-weight: bold;
}

.recharge-modal-body p {
    font-style: italic;
}

.recharge-modal-body .input-container {
    margin-top: 15px;
}
.recharge-modal-body .input-container label {
    font-weight: 600;
}
.recharge-modal-body .input-container input {
    padding: 6px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.recharge-modal-body .total-amount-container {
    grid-area: cost;
    padding: 15px 20px 15px 10px;
    background: rgba(255, 255, 255, 0.6);
    border-top: 1px #f2f2f2 solid;
    text-align: center;
    height: 100px;
}
.recharge-modal-body .total-amount-container  label {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}

.recharge-modal-body .total-amount-container h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    opacity: 1;
}

.recharge-modal-body .total-amount-container h1 small {
    color: rgba(107, 165, 57, 1);
}

.recharge-modal-body .total-amount-containerscisa h1 span {
    margin-left: 5px;
    word-break: break-all;
}

.recharge-details p {
    font-weight: bold;
}
.recharge-details + .col-md-12 {
    margin-top: 15px;
}

/***********************************

    Payment options Modal

************************************/
.payment-options {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 420px;
    overflow-y: auto;
    background: #f5f5f5;
    padding: 5px 15px;
    position: relative;
}
.payment-options .item.payment-options__item {
    margin: 7px 0;
    padding: 0;
    display: block;
    background: #FFF;
    cursor: pointer;
    -o-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
}
.payment-options .item.payment-options__item:hover {
    -webkit-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
}
.payment-options .item.payment-options__item label {
    bottom: 0;
    cursor: pointer;
    color: rgba(107, 165, 57, 1);
    opacity: 1;
    position: relative;
    width: 100%;
    height: 100%;
    text-transform: none;
}
.payment-options .item.payment-options__item label img {
    height: 70px;
    width: 70px;
    -o-object-fit: cover;
    object-fit: cover;
}
.payment-options .item.payment-options__item label.renewal-label {
    cursor: default;
    margin-bottom: 0px;
}
.payment-options .item.payment-options__item label .payment-options__text {
    display: flex;
    align-items: center;
    margin-left: 10px;
    overflow: hidden;
    justify-content: space-around;

}

.payment-options .item.payment-options__item label .payment-options__text.payment-option-name {
    width: 45%;

}

.payment-options .item.payment-options__item label .payment-options__text h3 {
    font-size: 18px;
    display: list-item;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 2px 0;
    color: #003050;
    font-weight: 600;
}

.payment-options .item.payment-options__item label .payment-options__text.renewal-filters.renewal-cost-units {
    background-color: #f5f5f5;
    height: 100%;
    min-height: 80px;
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    text-align: center;
}

.payment-options .item.payment-options__item label .payment-options__text p {
    color: #003050;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    padding-right: 10px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 36px;
    display: -webkit-inline-box;
}
.payment-options .item.payment-options__item label .payment-options__text.renewal-cost-container {
    margin-left: 0px;
    height: 100%;
    width: 25%;
    background-color: #f5f5f5;
}
.payment-options .item.payment-options__item label .payment-options__text.renewal-cost-container h2 {
    color: #003050;
    line-height: 70px;
    text-align: center;
    font-size: 26px;
    font-weight: lighter;
    margin: 5px 0;
}

.payment-options .item.payment-options__item label .payment-options__text.renewal-cost-container h2 small strong {
    font-weight: 400;
    line-height: 1;
    color: #777 !important;
    font-size: 65%;
}

.payment-options .item.payment-options__item label span {
    position: absolute;
    bottom: 10px;
    text-align: right;
    right: 10px;
    color: #001c2a;
    opacity: 0.65;
}
.payment-options .item.payment-options__item label span.show-more-renewal {
    cursor: pointer;
}
.payment-options .item.payment-options__item input[type="checkbox"] {
    display: none;
}
.payment-options .item.payment-options__item input[type="checkbox"] + label:before {
    content: "";
    height: 100%;
    width: 100%;
    -o-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 3px solid transparent;
    position: absolute;
}
.payment-options .item.payment-options__item input[type="checkbox"]:checked + label:before {
    content: "";
    background: rgba(107, 165, 57, 0.1);
    border: 3px solid rgba(107, 165, 57, 1);
}
.payment-options .item.payment-options__item input[type="checkbox"]:checked + label:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-bottom: 55px solid transparent;
    border-right: 55px solid #6BA539;
    position: absolute;
    right: 0;
    top: 0;
    -o-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-animation: check-mark 360ms forwards;
    animation: check-mark 360ms forwards;
}
.payment-options .item.payment-options__item input[type="checkbox"]:checked + label svg {
    display: block;
}

.table-row-disabled {
    opacity: 0.7;
}

.parking-about {
    white-space: pre-line;
}

.align-self-end{
    align-self: flex-end;
}

.row-gap-10{
    row-gap: 10px;
}

.row-static{
    margin-right: -15px;
    margin-left: -15px;
}

.voucher-preview-body-alignment {
    width: 80%;
    margin: auto;
    text-align: center;
}

.voucher-preview-body-padding {
    padding-bottom: 20px;
    text-align: center;
}

.voucher-preview-logo-inner {
    max-width: 60%;
    max-height: 110px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    width: fit-content;
}

.voucher-preview-outer {
    width: 30%;
    margin: auto;
    margin-top: 40px;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    margin-bottom: 40px;
}

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}
.linear-background-loading {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1000px 104px;
    position: relative;
    overflow: hidden;
    color: transparent;
}

/***************************************
    Captcha Modal
****************************************/
.captcha-modal .modal-content{
    min-width: 400px;
}

/***************************************
    Pay and Display
****************************************/
.pay-and-display {
    width: 100%;
}

.pay-and-display-label {
    line-height: 1.9;
}

.pay-and-display .uniformCheckboxLabel {
    /*top: 0px;*/
}

/***************************************
    Timestep
****************************************/
.timestep {
    min-width: 400px;
}

.timestep-label {
    min-width: 200px;
}

/***************************************
    General
***************************************/
.popover-content {
    white-space: pre-line;
}

.popover-customize {
    max-width: 400px;
}

.text-wrap {
    text-wrap: wrap;
}

.fa-icon {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    display: block;
}


.x-square-icon{
    background-image: url('/img/square-x-twitter.227a7f10.svg') !important;
    color: white;
}

.x-icon {
    background-image: url('/img/x-twitter.52469628.svg') !important;
    color: white;
}