html,
body {
    height: 100%;
}

.wrap {
    height: 100%;
    height: auto;
    /*    margin: 0 auto -60px;
        padding: 0 0 60px;*/
    background-color: #f1f1f1;
}
.navbar-inverse {
    background-color: #fff;
    border-color: #fff;
}
.height-100 {
    height: 100%;
}

.wrap > .container {
    /*    padding: 70px 15px 20px;*/
    /*padding-top: 80px;*/
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.site-index {
    background: #fff;
    width: 430px;
    margin: auto;
    /*margin-top: 10%;*/
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

.navbar {
    min-height: 80px;
}
.bg-blue {
    background-color: #0074bc;
}
.bg-gray{
    background-color: #f1f1f1;
}
.blue-color {
    color: #0074bc;
}
.color-white{
    color: #fff;
}
.color-mid-grey {
    color: #999;
}
.color-light-grey {
    color: #f1f1f1;
}
.color-yellow{
    color: #ffcb05;
}
.color-blue{
    color: #0074bc;
}
.color-green {
    color: #5cb85c;
}
.center-form {
    width: 50%;
    padding: 10px;
    height: 100%;
    display: table-cell;
    /*    display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;*/
}
#payment-invoicenum {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: rgba(223,225,229,0);
    background: #fff;
    border-bottom: 1px solid #dfe1e5;
    width: 100%;
    height: 30px;
}
#payment-invoicenum:focus {
    outline: none;
}

#invoice-form .inner-addon {
    position: relative;
}
#invoice-form .right-addon input {
    padding-right: 30px;
}
#invoice-form .icon-invoice {
    background-image: url('../images/invoice.svg');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    padding: 10px;
    pointer-events: none;
    right: 18px;    
    top: 5px;
    display: inline-block;
}

#invoice-form .inner-addon label{
    position: absolute;
    top: -4px;
    left: 20px;
    font-size: 14px;
    color: #757575;
    cursor: text;
    -webkit-transition: color .2s ease-out,-webkit-transform .2s ease-out;
    transition: color .2s ease-out,-webkit-transform .2s ease-out;
    transition: transform .2s ease-out,color .2s ease-out;
    transition: transform .2s ease-out,color .2s ease-out,-webkit-transform .2s ease-out;
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.loader { 
    width:100vw;
    height:100vh;
    background:#000;
    opacity:.6;
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:2000 
}

.loader-animation { 
    position:fixed; 
    left: calc(50% - 60px);
    top: calc(50% - 60px);
    transform:translate(-50%,-50%);
    border:16px solid #f3f3f3;
    border-radius:50%;
    border-top:16px solid #f48120;
    -webkit-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
    width:120px;
    height:120px;
    z-index:2001
}


.payment-sucess table, .payment-error table {
    border-collapse: collapse;
    width: 100%;
}

.payment-sucess td, .payment-sucess th, .payment-error td, .payment-error th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

.payment-sucess tr:nth-child(even) , .payment-error tr:nth-child(even) {
    background-color: #dddddd;
}

.margin-0 {
    margin: 0;
}
.margin-1 {
    margin: 10px;
}
.margin-top-20 {  
    margin-top: 20px;
}
.margin-bottom-20 {
    margin-bottom: 20px;
}
.margin-top-30 {  
    margin-top: 30px;
}
.margin-bottom-30 {
    margin-bottom: 30px;
}
.margin-bottom-80 {
    margin-bottom: 80px;
}
.margin-bottom-15 {
    margin-bottom: 15px;
}

.padding-0 {
    padding: 0;
}

.padding-left-0 {
    padding-left: 0;
}
.padding-right-0 {
    padding-right: 0;
}

.padding-5{
    padding: 5px;
}

.padding-1{
    padding: 10px;
}

.padding-top-20 {
    padding-top: 20px;
}
.padding-bottom-20 {
    padding-bottom: 20px;
}
.padding-bottom-30 {
    padding-bottom: 30px;
}
.padding-vr-1 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.padding-hr-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-16 {
    font-size: 16px;
}
.font-size-20 {
    font-size: 20px;
}
.font-size-24 {
    font-size: 24px;
}
.font-size-28 {
    font-size: 28px;
}
.font-size-32 {
    font-size: 32px;
}
.font-weight-600 {
    font-weight: 600;
}
.btn {
    padding: 6px 40px;
    border-radius: 0;
}
.btn-primary:hover, .btn-primary, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary, .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
    color: #fff;
    background-color: #f48020;
    border-color: #f48020;
}
.height-40 {
    height: 40px;
}
.height-60 {
    height: 60px;
}
.form-horizontal .control-label {
    font-weight: 400;
    font-size: 16px;
    text-align: left;
}
.navbar-nav > li > a, .nav li > form > button.logout {
    padding: 30px;
}
.navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #9d9d9d;
}

.payment-index table {
    background-color: #fff;
    border: 10px solid #FFF
}
#invoice-form + table th, #invoice-form + table td { padding: 5px; }
#invoice-form + table { width: 100%; }
#invoice-form + table { border: 1px solid #f1f1f1; }
#invoice-form + table td, #invoice-form + table th { border-color: #f1f1f1; }
.main-banner-image {
    background-image: linear-gradient(0deg,rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)), url(../images/pay-banner.jpg);
    background-position: 50% 69%;
    background-size: cover;
    margin-bottom: 2%;
}
.inner-banner2 {
    padding: 10% 0 0%;
    color: #fff;
}
footer .media-body a:hover, .copy-rights a.text-white:hover, #myMenu ul li .full-width li a:hover, .sitemap-section a:hover, .menuactive {
    color: #f4811f !important;
    transition: all 200ms linear;
}
/* footer -css - start  */

.layout-footer {
    background: #1d242c;
    padding-top: 60px;
    color: #fff;
}
section, footer, header, aside, nav {
    display: block;
}
hr {
    border-top: 1px solid rgba(204, 204, 204, 0.1);
    margin-bottom: 0;
}
.m-0 {
    margin: 0;
}
.mb-3 {
    margin-bottom: 1rem;
}
.mb-3, .my-3 {
    margin-bottom: 1rem;
}
.mb-4, .my-4 {
    margin-bottom: 1.5rem;
}
.mb-1, .my-1 {
    margin-bottom: 0.25rem;
}
.mt-1, .my-1 {
    margin-top: 0.25rem;
}
.pl-xl-0, .px-xl-0 {
    padding-left: 0;
}
.pl-xl-5, .px-xl-5{
    padding-left: 3rem
}
.pl-2, .px-2{
    padding-left: 0.5rem 
}
.pl-md-5, .px-md-5 {
    padding-left: 3rem ;
}
.pb-2, .py-2 {
    padding-bottom: 0.5rem;
}
.pt-3, .py-3 {
    padding-top: 1rem;
}
.layout-footer h3 {
    font-size: 16px;
}
.layout-footer .media-body a, .ftr-social-media a, .layout-footer p, .layout-footer i {
    color: #aaa;
    position: relative;
    top: 0px;
    font-weight: 300;
    font-size: 14px;
}
a:visited {
    outline: none;
    text-decoration: none;
}
.copy-rights a, .copy-rights span {
    font-size: 12px;
}
.layout-footer a {
    color: #fff;
}
.social img {
    margin: 6px 5px;
    width: 26px;
    height: 26px;
}
.layout-footer .media-left { vertical-align: middle; }

/* footer -css - stop  */

/* header css - start */
.h2-heading {
    font-size: 46px;
    font-weight: 700;
    margin-bottom: 20px;
}
.inner-banner .h2-heading {
    text-align: left;
}
.logo-wrap {
    position: absolute;
    display: block;
    left: 0;
    top: 20px;
    cursor: pointer;
    margin-left: 50px;
}
.logo-wrap a {
    cursor: pointer;
    font-weight: 900;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    transition: all 0.3s ease-out;    
}
.logo-wrap a img{
    width: 220px;
    height: 90px;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
/* header css - stop */

.card-details li{ 
    display: inline-block;    
}
.payment-view .form-horizontal .control-label {
    padding-left: 0;
}


/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
    .center-form {
        width: 90%;
    }
    .center-form {
        height: calc(100% - 296px);
    }
    .site-index {
        width: 100%;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}