/*For Payment Work*/


svg:not(:root),
svg { display: block; overflow: auto; }


/* Icons */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
    .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
    .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/*Helpers*/
.no-pad { padding: 0 !important; }

/*Scroll bars*/

::-webkit-scrollbar { width: 3px; height: 2px; }

::-webkit-scrollbar-button { width: 3px; height: 2px; }

::-webkit-scrollbar-thumb { background: #FC8002; border: 3px none rgba(0, 0, 0, 0.54); border-radius: 1px; }

    ::-webkit-scrollbar-thumb:hover { background: #FC8002; }

    ::-webkit-scrollbar-thumb:active { background: #FC8002; }

::-webkit-scrollbar-track { background: #fff; border: 2px none #fff; border-radius: 1px; }

    ::-webkit-scrollbar-track:hover { background: #fff; }

    ::-webkit-scrollbar-track:active { background: #fff; }

::-webkit-scrollbar-corner { background: transparent; }

.drag-target { z-index: 997 !important; }

.dark-1 { background-color: #000000; }

.dark-2 { background-color: #212121; }

.dark-3 { background-color: #303030; }

.dark-4 { background-color: #424242; }

.light-1 { background-color: #E0E0E0; }

.light-2 { background-color: #F5F5F5; }

.light-3 { background-color: #FAFAFA; }

.light-4 { background-color: #FFFFFF; }

.primary-500 { background-color: #cddc39; }

.primary-50 { background-color: #f9fbe7; }

.primary-100 { background-color: #f0f4c3; }

.primary-700 { background-color: #afb42b; }

.accent-50 { background-color: #e0f7fa; }

.accent-A100 { background-color: #84ffff; }

.accent-A200 { background-color: #18ffff; }

.accent-A400 { background-color: #00e5ff; }

.warn-500 { background-color: #ff5722; }

.warn-100 { background-color: #ffccbc; }

.warn-700 { background-color: #e64a19; }

/*.dropdown-content { overflow: visible !important; background-color: #e5e5e5 ; margin-top: -4px !important; }*/

.dropdown-content.sub-menu { margin-top: -0.3rem; }

.button-collapse { width: 64px; text-align: -webkit-center; }

a.button-collapse:hover { background: rgba(0, 0, 0, 0.13); border-radius: 50%; }


/* Stepper */
label.invalid { font-size: 13px; font-weight: 500; color: red !important; top: 50px !important; }

    label.invalid.active { -webkit-transform: translateY(0%) !important; transform: translateY(0%) !important; }
/*Validate.js FIX*/

ul.stepper { counter-reset: section; /*max-width: 800px;*/ }

    ul.stepper.horizontal { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 458px; }

.card-content ul.stepper.horizontal { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; overflow: hidden; }

    .card-content ul.stepper.horizontal:first-child { margin-top: -20px; }

ul.stepper.horizontal::before { content: ''; background-color: transparent; width: 100%; min-height: 84px; box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12); position: absolute; left: 0; }

ul.stepper .wait-feedback { left: 0; right: 0; top: 0; z-index: 2; position: absolute; width: 100%; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

ul.stepper:not(.horizontal) .step { position: relative; }

ul.stepper .step.feedbacking .step-content > *:not(.wait-feedback) { opacity: 0.1; }

ul.stepper.horizontal .step { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 84px; }

    ul.stepper.horizontal .step:last-child { width: auto; }

    ul.stepper.horizontal .step:not(:last-child)::after { content: ''; display: inline-block; width: 100%; height: 1px; background-color: rgba(0,0,0,0.1); }

ul.stepper:not(.horizontal) .step:not(:last-child) { margin-bottom: 10px; -webkit-transition: margin-bottom 0.4s; transition: margin-bottom 0.4s; }

    ul.stepper:not(.horizontal) .step:not(:last-child).active { margin-bottom: 5px; }

ul.stepper:not(.horizontal) .step::before { position: absolute; top: 12px; counter-increment: section; content: counter(section); height: 28px; width: 28px; color: white; background-color: rgb(193, 193, 193); border-radius: 50%; text-align: center; line-height: 28px; font-weight: 400; }

ul.stepper:not(.horizontal) .step.active::before, ul.stepper:not(.horizontal) .step.done::before, ul.stepper.horizontal .step.active .step-title::before, ul.stepper.horizontal .step.done .step-title::before { background-color: #ecb733; }

ul.stepper:not(.horizontal) .step.done::before, ul.stepper.horizontal .step.done .step-title::before { content: "\f26b"; font-size: 14px; font-weight: 200; font-family: 'Material-Design-Iconic-Font'; background-color: #8BC34A !important; }

ul.stepper:not(.horizontal) .step.wrong::before, ul.stepper.horizontal .step.wrong .step-title::before { content: "\f136"; font-size: 14px; font-weight: 200; font-family: 'Material-Design-Iconic-Font'; background-color: #de3030 !important; }

ul.stepper:not(.horizontal) .step-title { margin: 0 -20px; cursor: pointer; padding: 15.5px 44px 10px 60px; display: block; cursor: default; }

ul.stepper.horizontal .step-title { line-height: 84px; height: 84px; padding-left: 65px; padding-right: 25px; display: inline-block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -ms-flex-negative: 0; flex-shrink: 0; }

ul.stepper.horizontal .step .step-title::before { position: absolute; top: 28.5px; left: 19px; counter-increment: section; content: counter(section); height: 28px; width: 28px; color: white; background-color: rgba(0,0,0,0.3); border-radius: 50%; text-align: center; line-height: 28px; font-weight: 400; }


ul.stepper .step-title::after { content: attr(data-step-label); display: block; position: absolute; font-size: 0.8rem; color: #424242; font-weight: 400; }

ul.stepper.horizontal .step-title::after { top: 15px; }


ul.stepper .step.active .step-title { font-weight: 500; cursor: default; }

ul.stepper .step-content { position: relative; display: none; height: calc(100% - 132px); width: inherit; overflow: visible; margin-left: 41px; margin-right: 24px; }

ul.stepper.horizontal .step-content { position: absolute; height: calc(100% - 84px); top: 84px; left: 0; width: 100%; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 20px 20px 76px 20px; }

.card-content ul.stepper.horizontal .step-content { padding-left: 40px; padding-right: 40px; }

ul.stepper:not(.horizontal) > .step:not(:last-child)::after { content: ''; position: absolute; top: 40px; left: 13.5px; width: 1px; height: calc(100% - 38px); background-color: rgba(0,0,0,0.1); -webkit-transition: height 0.4s; transition: height 0.4s; }

ul.stepper:not(.horizontal) .step.done::after, ul.stepper.horizontal .step.done .last-child::after { background-color: #8bc34a; height: calc(100% - 0px); }

ul.stepper:not(.horizontal) > .step.active:not(:last-child)::after { height: calc(100% - 12px); background-color: rgb(236, 183, 51); }
ul.stepper:not(.horizontal) .step.wrong:not(:last-child)::after { height: calc(100% - 12px); background-color: #de3030; }
ul.stepper .step-actions { padding-top: 2px; -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: -webkit-box; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

ul.stepper:not(.horizontal) .step-actions .btn:not(:last-child), ul.stepper:not(.horizontal) .step-actions .btn-flat:not(:last-child), ul.stepper:not(.horizontal) .step-actions .btn-large:not(:last-child) { margin-right: 10px; }

ul.stepper.horizontal .step-actions .btn:not(:last-child), ul.stepper.horizontal .step-actions .btn-flat:not(:last-child), ul.stepper.horizontal .step-actions .btn-large:not(:last-child) { margin-left: 5px; }

ul.stepper.horizontal .step-actions { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background-color: #fff; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }

.card-content ul.stepper.horizontal .step-actions { padding-left: 40px; padding-right: 40px; }

ul.stepper .step-content .row { margin-bottom: 7px; }

/*.modal .modal-content { padding: 15px; background: linear-gradient(to right, #ffd844, #d49e24 100%); }*/

#modal1 .navbar-brand { position: relative; font-size: 22px; color: #FFF; height: 28px; }
#modal1 .navbar-default { position: relative; font-size: 22px; color: #FFF; height: 28px; }
#modal1 .navbar-header { position: relative; font-size: 22px; color: #FFF; height: 28px; }
#modal1 .navbar-brand { border-radius: 4px; float: left; top: -40px; width: 65px; z-index: 99; left: -20px; }
.brandlogo { bottom: 0; left: 0; padding: 10px; right: 0; top: 0; }
.brandlogo, .cancel-this { text-align: center; position: absolute; }
    .brandlogo img, .brandlogo::before { display: inline-block; vertical-align: middle; }
    .brandlogo img, .brandlogo::before { display: inline-block; vertical-align: middle; }
#modal1 img { border: 0; vertical-align: middle; }

#modal1 { overflow-y: visible; width: 360px; max-height: 100%; float: left; margin-top: 12px; }
    #modal1 .brandlogo { padding: 0px; }
    #modal1 .card { box-shadow: none; width: 100%; padding: 11px 15px 15px 24px; padding-right: 0px; }

        #modal1 .card .card-content { padding: 0px; border-radius: 0 0 0px 0px; margin-top: -30px; }

.model-email-content { padding: 0px; }

.lean-overlay { background: #44454685; }

.step-content a { color: #eeaa00 !important; font-size: 15px; }
.Reccomended { color: green; top: 0px; font-size: 12px; position: absolute; display: block; margin: 0px; margin-left: 13px; }

/*For Select Payment Option*/

.PaymentMode { margin-bottom: 10px; cursor: pointer; -webkit-box-shadow: 0px 0px 3px 0px rgba(171,171,171,1); -moz-box-shadow: 0px 0px 3px 0px rgba(171,171,171,1); box-shadow: 0px 0px 3px 0px rgba(171,171,171,1); background: #eaeaea; position: relative; cursor: pointer; padding: 12px 0px 12px 0px !important; float: left; width: 118px; margin-right: 0px; margin-left: 12px; text-align: center; }
    .PaymentMode .selPayMode { float: left; width: 100%; line-height: 1; }
    .PaymentMode .svg { float: right; display: none; position: absolute; right: 0; top: 11px; }
        .PaymentMode .svg img { width: 35px; }
    .PaymentMode:nth-last-child(1) { border-bottom: 0px solid #d2d1d1; }
    .PaymentMode a:hover, a:focus { text-decoration: none; }
.svg-success { stroke-width: 2px; stroke: #8EC343; fill: none; }
    .svg-success path { stroke-dasharray: 17px, 17px; stroke-dashoffset: 0px; -webkit-animation: checkmark 0.15s ease-in-out 0.4s backwards; animation: checkmark 0.15s ease-in-out 0.4s backwards; }
    .svg-success circle { stroke-dasharray: 76px, 76px; stroke-dashoffset: 0px; transform: rotate(-90deg); transform-origin: 50% 50%; -webkit-animation: checkmark-circle 0.6s ease-in-out forwards; animation: checkmark-circle 0.6s ease-in-out forwards; }
.PaymntImmg { width: 31px; margin-top: 12px; margin-bottom: 5px; }

@keyframes checkmark {
    0% { stroke-dashoffset: 17px; }
    100% { stroke-dashoffset: 0; }
}

@keyframes checkmark-circle {
    0% { stroke-dashoffset: 76px; }
    100% { stroke-dashoffset: 0px; }
}


.input-field label.active { font-size: 13px !important; }



.PayLeft { float: left; padding: 5px 5px 5px 0px; }
    .PayLeft::after { content: "    :"; }
.PayRight { float: right; padding: 5px 0px 5px 0px; }

.hide { display: none; }

.overflow { overflow: hidden !important; }

@media screen and (max-width: 690px) {
    #modal1 { width: 99% !important; top: 0% !important; }
        #modal1 .card { padding: 11px 15px 15px 11px; width: 100%; }
    .RightDetails .input-field { margin-left: 20px; }
    .PaymentFormdetails { width: 38%; }
    .stepper { width: 91% !important; }
}

@media screen and (max-width: 480px) {

    .navbar-brand { display: none; }
    #modal1 .card { max-height: 385px; overflow-y: auto; }
    ul.stepper .step-content { margin-left: 25px; margin-right: 11px; }
}

/*@media screen and (max-width: 1024px) and (min-width: 480px) {
    #modal1 { width: 360px !important; }
}*/