@font-face {
    font-family: 'Montserrat-Regular';
    src: url(../fonts/Montserrat-Regular.ttf);
}
body {
    font-family: Montserrat-Regular, sans-serif;
    height: 100%;
}
.btn-theme-bg {
    background-color: #006699;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
.btn-theme-bg:hover {
    color: #fff;
    background-color: #51b9ea;
}
.btn-theme-bg:focus {
    color: #fff;
}
.btn-theme-bg-reverse {
    background-color: #ffc433;
    color: #00416b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
.btn-theme-bg-reverse:hover {
    background-color: #ffd466;
    color: #00416b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
#loading-spinner {
    max-height: 100%;
    max-width: 100%;
}
.qpmt-background {
    position: fixed;
    height: 100%;
    width: 100%;
    background: url(../img/3R_Background_PayMyLoan.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.qpmt-gradient {
    height: 120px;
    width: 100%;
    background-color: #006699;
    background-image: linear-gradient(#006699, #ffffff);
}
.qpmt-container {
    width: 100%;
    height: 100%;
    position: absolute;
}
.qpmt-row-top {
    position: absolute;
    left: 50%;
    margin-left: -67px;
    bottom: 20%;
}

.qpmt-row-middle {
    position: fixed;
    left: 50%;
    margin-left: -67px;
    bottom: 20%;
}
.qpmt-row-bottom {
    position: absolute;
    left: 50%;
    margin-left: -67px;
    bottom: 20%;
}
.qpmt-form {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 12px;
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 10px;
    
}
.payment-modal-title {
    color: #ffffff;
    padding: 16px;
}
#payButton {
    
    position: relative;
    animation-name: pay-button;
    animation-duration: 1.5s;
}
/*@keyframes pay-button {
    0% { opacity: 0;}
    60% { opacity: 0;}
    100% { opacity: 1;}
}*/

#logo-text {
    
}
.qpay-view {
}
.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}
/*.ng-enter {
    animation: animate__slideInRight;
    animation-duration: 0.5s;
}
.qpmt-form .ng-enter {
    animation: none;
}
.animate-show-hide.ng-hide {
    opacity: 0;
    animation: animate__zoomOut;
    animation-duration: 0.5s;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
    transition: all linear 0.5s;
}*/
/* Fancy checkboxes and radio buttons */
label.btn > i.fa.fa-square-o {
    display: inline;
}
label.btn > i.fa.fa-check-square-o {
    display: none;
}
label.btn.active > i.fa.fa-square-o {
    display: none;
}
label.btn.active > i.fa.fa-check-square-o {
    display: inline;
}
label input[type="radio"] ~ i.fa.fa-square-o {
    display: inline;
}
label input[type="radio"] ~ i.fa.fa-check-square-o {
    display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-square-o {
    display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-check-square-o {
    display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-square-o {
    display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o {
    display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-square-o {
    display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o {
    display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
    color: #32c5d2;
}
div[data-toggle="buttons"] label:hover {
    color: #32c5d2 !important;
}
div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
    -webkit-box-shadow: none;
    box-shadow: none;
}
div[data-toggle="buttons"] label {
    text-align: left;
}
/*Calendar stuff*/
.payment-early {
    background-color: #E7FFCB !important;
}
.payment-due {
    background-color: #CFE5B6 !important;
}
.payment-grace {
    background-color: #FFE3CB !important;
}
.payment-late {
    background-color: #FFCBE7 !important;
}
.due-icon {
    color: #E7FFCB;
}
.grace-icon {
    color: #FFFDCB;
}
.late-icon {
    color: #FFCBE7;
}
.icon-border {
    border: 1px solid #000000;
    padding: 2px 2px 3px 4px;
}
.cal-day-open {
    border: 1px solid #0044ff;
}
/*Loading spinner*/
.loader {
    display:    none;
    position:   fixed;
    z-index:    9000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url(/img/ajax-loader.gif) 50% 50% no-repeat;
}
body.loading {
    overflow: hidden;
}
body.loading .loader {
    display: block;
}
.blurry-element {
    /* Any browser which supports CSS3 */
    filter: blur(5px);
    /* Firefox version 34 and earlier */
    filter: url("blur.svg#gaussian_blur");
    /* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */
    -webkit-filter: blur(5px);
}
a {
    color: #fff;
}
a:hover {
    color: #ffd466;
}
.divide10 {
    width:100%;
    height: 10px;
}
/* Dividers */
.divide30 {
    width: 100%;
    height: 30px;
}

.divide40 {
    width: 100%;
    height: 40px;
}

.divide50 {
    width: 100%;
    height: 50px;
}

.divide60 {
    width: 100%;
    height: 60px;
}
.divide115 {
    width: 100%;
    height: 115px;
}
.divide200 {
    width: 100%;
    height: 200px;
}
.divide260 {
    width: 100%;
    height: 260px;
}
.logo-size {
    max-width: 160px;
}
.bg-white {
    background: #fff;
}
.header-row {
    background: #fff;
    padding: 20px;
}
.routing-row {
    color: #fff;
    background: #2160a9;
    text-align: right;
    padding-right: 10px;
}
.footer-row {
    background: #2160a9;
    color: #fff;
    padding: 10px;
}
.footer-row-trim {
    background: #00416a;
}
.stepUntouched {
    color: #fff;
}

.stepActive {
    color: #ffd466;
}

.stepTouched {
    color: #006699;
}

    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 991px) {
        .largeScreen {
            display: none;
        }

        .smallScreen {
            display: normal;
        }
        .stepUntouched {
            color: #006699;
        }

        .stepActive {
            color: #ffd466;
        }

        .stepTouched {
            color: #51b9ea;
        }
        .logo-size {
            max-width: 200px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

    }
   
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 992px) {
        .largeScreen {
            display: normal;
            border: 1px solid #000;
            border-radius: 5px;
            height: 100%;
        }

        .smallScreen {
            display: none;
        }
        .stepUntouched {
            color: #333;
            background-color: #fff;
            padding: 10px;
        }

        .stepActive {
            color: #006699;
            background-color: #ffd466;
            padding: 10px;
        }

        .stepTouched {
            color: #fff;
            background-color: #51b9ea;
            padding: 10px;
        }

    }