@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i');

.payment_portal {
background-color: #f0f0f0;
margin: 0;
padding: 100px 0 100px;
}
.payment_portal h1 {
font-size: 22px;
font-family: 'Muli', sans-serif;
color: rgb(60, 147, 245);
font-weight: 600;
line-height: 1.2;
letter-spacing: 2px;
text-align: center;
padding: 0;
margin-bottom: 35px;
}
.panel-default>.panel-heading {
color: #333;
background-color: #fff;
border-color: #e4e5e7;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.panel-default>.panel-heading a {
display: block;
padding: 10px 15px;
}

.panel-default>.panel-heading a:after {
content: "";
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: right;
transition: transform .25s linear;
-webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
background-color: #eee;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
content: "\55";
font-family: 'dashboard-icons';
font-size: 16px;
line-height: 30px;
/*-webkit-transform: rotate(180deg);
transform: rotate(180deg);*/
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
content: "\55";
font-family: 'dashboard-icons';
font-size: 16px;
line-height: 30px;
/*-webkit-transform: rotate(90deg);
transform: rotate(90deg);*/
}
.payment_portal .form-group label {
font-size: 14px;
font-family: 'Muli', sans-serif;
color: rgb(97, 102, 117);
font-style: italic;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.2px;
}
.payment_portal .form-group select {
font-size: 14px;
font-family: 'Muli', sans-serif;
color: rgb(97, 102, 117);
font-style: italic;
line-height: 1.2;
font-weight: 700;
letter-spacing: 1px;
border-radius: 0;
border: solid 1px transparent;
border-bottom-color: rgba(97, 102, 117, 0.2);
box-shadow: none;
padding: 10px 0 15px;
height: auto;
}
.form-group select {
-moz-appearance: none;
-webkit-appearance: none;
}
select::-ms-expand {display: none!important; }
.select-wrap:after {
content: "\79";
font-family: 'dashboard-icons';
color: #777;
position: absolute;  
right: 15px;
bottom: 30px;
vertical-align: middle;
text-align: center;
pointer-events: none;
font-size: 14px;
}
.payment_portal .form-group.state select {
font-family: 'Myriad Pro', sans-serif;
font-weight: 400;
padding: 2px 0 15px;
font-style: normal;
color: #333;
border-bottom: 1px solid #dfdfdf;
}
.form-group.select-wrap.state {
margin-top: -14px;
}
.select-wrap.state:after {
bottom: 30px;
}
.form-group.select-wrap.state label {
font-family: 'Open Sans', sans-serif;
color: #777777;
font-size: 12px;
font-weight: normal;
}
.bottom-butn .btn.btn-primary:hover, 
.bottom-butn .btn.btn-primary:focus, 
.bottom-butn .btn.btn-primary:active, 
.bottom-butn .btn.btn-primary.active, 
.bottom-butn .btn.btn-primary.focus {
background-color: rgb(48, 200, 84);
box-shadow: 0px 8px 29px 0px rgba(48, 200, 84, 0.35);
border-color: rgb(48, 200, 84);
}
.bottom-butn .btn.btn-primary:focus {
box-shadow: 0px 5px 19px 0px rgba(48, 200, 84, 0.35);
}
.makepayment-con-area {
padding: 0px 0px 0px 15px;
}
.hint {
margin-top: -20px;
opacity: 0.5;
font-size: 13px;
letter-spacing: 0.3px;
}
.error {
margin-top: -20px;
margin-bottom: 5px;
}
.bottom-butn {
margin: 20px 0px 30px 25px;
}
.bottom-butn .btn.btn-primary {
background-color: rgb(48, 200, 84);
box-shadow: 0px 8px 29px 0px rgba(48, 200, 84, 0.35);
border-color: rgb(48, 200, 84);
}
.bottom-butn-details {
text-align: center;
}
.account-description {
list-style-type: none;
padding-left: 0;  
margin: 20px 0 10px;
}    
.account-description li {  
padding: 10px 15px 8px;
margin: 5px 0;
border-radius: 3px;  
}
.account-description li:after {
content: "";
clear: both;
float: none;
display: table;
}
.account-description .odd {
background-color: #dff3ff;            
}   
.account-description .even {
background-color: #edf8ff;            
}    
.account-description li p {
font-size: 14px;
font-family: 'Muli', sans-serif;
color: rgb(85, 85, 85);
line-height: 1.2;  
float: left;      
width: 50%;    
text-align: left;  
margin: 0;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
.account-description li .amt {        
float: right !important;       
text-align: right;        
}
.account-description li h5 {
font-size: 13px;
font-family: 'Muli', sans-serif;
color: #555; /*rgb(51, 51, 51);*/
font-weight: 700;
line-height: 1.2;     
float: left;      
width: 50%;      
margin: 0;
/*letter-spacing: 1px;*/
}
.account-description li h6 {
font-size: 14px;
font-family: 'Muli', sans-serif;
color: #000; /*rgb(51, 51, 51);*/
font-weight: 700;
line-height: 1.2;       
float: right;      
width: 50%;   
text-align: right;   
margin: 0;
}
.account-description li .text-red {
color: rgb(255, 54, 0);
/*margin-bottom: 5px;*/
}   
.account-description li .small-font {
font-size: 12px;
}
.account-description .bg {
background-color: #555;/*#1280c6;*/
border-top: solid 1px #555;
border-radius: 0px;      
}
.account-description .bg h5, .account-description .bg h6 {
color: #fff;
}    
.account-description .text-blue {
color: #007acc;
}
.payment_label {
font-size: 10px;
font-family: 'Muli', sans-serif;
color: rgb(136, 136, 136);
font-weight: 600;
text-transform: uppercase;
margin-top: 15px;
letter-spacing: 1px;
margin-bottom: 5px;
}
.payment_detail {
font-size: 14px;
font-family: 'Muli', sans-serif;
color: rgb(51, 51, 51);
font-weight: 700;
margin-bottom: 10px;
}

.payment_portal .panel{
border: none;
box-shadow: none;
border-bottom: 1px dotted gainsboro;
}
.payment_portal .panel-default>.panel-heading a{
font-size: 16px;
line-height: 30px;
text-decoration: none;
font-weight: 400 !important;
color: #4d5766;
letter-spacing: 0.5px;
}
.payment_portal  .panel-default>.panel-heading a[aria-expanded="true"]{
background-color: #fff;
}
.disabled-step {
pointer-events: none;
}
.panel-default.disabled-step>.panel-heading a {
opacity: 0.5;
}
/*.payment_portal .panel-default>.panel-heading a[aria-expanded="false"]:after{
content:"\e259";
-webkit-transform: rotate(0deg); 
transform: rotate(0deg); 
}
.payment_portal .panel-default>.panel-heading a[aria-expanded="true"]:after{
content:"\e259";
-webkit-transform: rotate(180deg); 
transform: rotate(180deg);
}

*/

.template-1 .navbar-me {
background-color: #333;
}
.template-7 .fixed-me {
z-index: 9999;
}


.security-deposit-area .panel-heading{
border:none;
}
.security-deposit-area .panel-title{
background-color: #f9f9f9;
border-bottom: 1px solid #f0f0f0;
padding: 30px;
font-weight: 600;
font-size: 16px;
color: #565758;
text-align: left;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0px;
}
.security-deposit-area .panel-body h2{
font-family: 'Myriad Pro', sans-serif;
color: #333333;
text-align: left;
font-size: 14px;
font-weight: 700;
padding: 0px 0px 25px 0px;
text-transform: uppercase;
margin-bottom: 0;
letter-spacing: 3px;
}
.security-deposit-area .panel-body{
padding: 30px !important;
}
.payment_portal .security-deposit-area .form-group label {
font-style: italic;
line-height: 1.2;
letter-spacing:1px !important;
font-family: 'Myriad Pro', sans-serif;
color: rgb(97, 102, 117);
font-weight: normal;
font-size: 12px !important;
text-align: left;
}
.payment_portal .security-deposit-area .form-group select{
font-size: 13px;
font-style: normal;
}
.payment_portal .security-deposit-area .form-group input{
margin-top: 20px;
}

.payment_portal .security-deposit-area .form-group .other-amount{
margin-top: 0px;
height: 38px;
}
.payment_portal .security-deposit-area .card-main .form-group input{
margin-top: 0px;
padding-bottom: 0px;
}
.payment_portal .security-deposit-area .card-main label{
font-size: 14px;
font-family: 'Muli', sans-serif;
color: rgb(97, 102, 117);
font-style: italic;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.2px;
}
.payment_portal .security-deposit-area .amount-initial{
font-size: 14px;
font-family: 'Muli', sans-serif;
font-weight: bold;
color: #333;
}
.payment_portal .security-deposit-area .payment-radio label{
font-size: 14px;
font-family: 'Muli', sans-serif;
color: rgb(97, 102, 117);
font-style: normal;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.2px;
}
.collapse-height{
       height: auto !important;
}


/* guest card contact form css */

.panel-body {
    padding: 30px;
}
.guestcard-form_css .form-group input,
.guestcard-form_css .form-group textarea {
    font-family: 'Myriad Pro', sans-serif;
    color: #333;
    font-weight: normal;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid #dfdfdf;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    padding: 15px 0px;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
}
.guestcard-form_css .form-group textarea {
       padding: 15px 0px !important;
       margin-top: 0px !important;
}
.guestcard-form_css .form-group textarea.lg_textarea {

}
.guestcard-form_css .form-group textarea.lg_textarea[data-sel].active-adaptive + label[placeholder]:before {
    transform: translate(0, -3.2em) scale(1, 1);
}
.guestcard-form_css .form-group textarea.lg_textarea[data-sel]:focus + label[placeholder]:before {
    transform: translate(0, -2.8em) scale(0.9, 0.9);
}
.guestcard-form_css .form-group label {
    font-size: 14px;
    font-family: 'Muli', sans-serif;
    color: rgb(97, 102, 117);
    font-style: italic;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.guestcard-form_css .form-group textarea + label[placeholder] {
    line-height: 1.25em;
    margin-top: calc(-4em + 10px);
    /*margin-bottom: calc((4em - 1em) + 2px);*/
}
.guestcard-form_css .form-group select {
    font-size: 14px;
    font-family: 'Myriad Pro', sans-serif;
    color: #333;
    /*font-style: italic;*/
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: 1px;
    border-radius: 0;
    border: solid 1px transparent !important;
    border-bottom-color: #dfdfdf !important;
    box-shadow: none;
    padding: 10px 0 15px;
    height: auto;
}
@-moz-document url-prefix() {
    .guestcard-form_css .form-group select {
        height: 45px;
    }
}

.guestcard-form_css .bottom-butn {
    text-align: center;
    margin: 0px 0px 20px 0px;
}
.guestcard-form_css .autofill-butn {
       background-color: transparent;
    padding: 8px 25px;
    border-radius: 25px;
    border: solid 1px #e4e5e7;
    margin: 0 15px 15px 0;
    color: #4d5766;
    letter-spacing: 0.5px;
}
.guestcard-form_css .autofill-butn:focus {
    outline: none;
}
.guestcard-form_css .autofill-butn i.icon {
    margin-right: 5px;
}
.guestcard-form_css label.error {
    display: block;
}
.make_payment_form_css .makepayment-con-area {
    padding: 0;
}
.make_payment_form_css .makepayment-con-area .form-group select {
    font-size: 14px;
    font-family: 'Myriad Pro', sans-serif;
    color: #333;
    /*font-style: italic;*/
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: 1px;
    border-radius: 0;
    border: solid 1px transparent !important;
    border-bottom-color: #dfdfdf !important;
    box-shadow: none;
    padding: 10px 0 15px;
    height: auto;
}
.make_payment_form_css .price_css {
    font-family: 'Myriad Pro', sans-serif;
    color: #333333;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    padding: 0px 0px 25px 0px;
    /*text-transform: uppercase;*/
    margin-bottom: 0;
    letter-spacing: 1px;
}
.make_payment_form_css .bottom-butn {
    margin: 20px 0px 20px 15px;
    text-align: center;
}

/* ./guest card contact form css */
/*stand alone payment page*/
.invoice-detail-sec{
    background-color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 15px 15px 10px;
}
h2.company-name{
    font-size: 16px;
    font-family: 'Myriad Pro', sans-serif;
    color: #333333;
    font-weight: 600;
    padding-bottom: 10px;
}
.invoice-detail{
    text-align: left;
}
.invoice-detail p{
    color: #888888;
    font-size: 13px;
    margin-bottom: 5px;
    font-family: 'Myriad Pro', sans-serif;
}
.invoice-detail span{
    color:#333;
}
.invoice-detail-sec img{
    height: 50px;
    width: auto;
}
.action{
    background-color: #fff;
    padding: 15px;
    margin-top: 4px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.view-invoice-btn,.view-invoice-btn:hover, .btn.btn-primary.view-invoice-btn:focus:active,.btn.btn-primary.view-invoice-btn:active,.btn.btn-primary.view-invoice-btn:focus,.btn.btn-primary.view-invoice-btn .active{ 
    background-color: #fff;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    color: rgb(51, 51, 51);
    line-height: 1.2;
    padding: 8px 15px;
    border: solid 1px #333;
    border-radius: 25px;
}
.invoice-icons,i.icon.dashboardicon-download.invoice-icons{
    font-size: 20px;
    color: #333;
    margin: 0 5px;
}
.action a,.merchant-detail a{
    text-decoration: none;
    color:#333;
}
.action .icons{
    margin-top: 3px;
    float: right;
}
.merchant-detail
{
    background-color: #fff;
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
}
.merchant-detail h3{
    font-size: 15px;
    font-weight: 600;
    font-family: 'Myriad Pro', sans-serif;
    color: #333333;
    margin-top: 0;
}
hr.divider{
    border-top: 2px solid #f0f0f0;
    margin-top: 10px;
    margin-bottom: 10px;
}
.privacy{
    color: #888888;
    font-size: 11px;
    padding-top: 20px;
    margin-bottom:30px;
}
.privacy i{
    padding-right: 5px;
}
.select-label{
    margin-top: -22px;
}
.payment_portal .form-group.select-label label{
    font-family: 'Open Sans', sans-serif;
    color: #777777;
    font-size: 13px!important;
}
.paid-sec{
    background-color: #fff;
    padding: 0 30px 30px;
    border-radius: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px; 
    margin-bottom: 20px;
    text-align: center;
    /*box-shadow: 1px 11px 9px 5px #e2e2e2;*/
}
.paid-sec .resdent-name{
    font-size: 32px;
    font-weight: 600;
    font-family: 'Myriad Pro', sans-serif;
    color: #333333;
    padding-top: 40px;
}
.paid-sec .invoice-status{
    font-size: 26px;
    color:#34a427;
    font-family: 'Myriad Pro', sans-serif;
    margin-bottom: 0;
}
.paid-sec span{
color:#bbb;
font-size:12px;
text-transform: uppercase;
}
.paid-sec .due-amaount{
font-size: 32px;
font-weight: 600;
font-family: 'Myriad Pro', sans-serif;
}
.paid-sec .confirmation-text{
    color: #888888;
    font-size: 14px;
    padding-bottom:20px;
}
.paid-sec .copyright{
    color:#ccc;
    font-size:12px; 
}
.bottom-butn .make_new_payment{
    background-color: #00338e;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 1px solid #00338e;
    font-family: 'Myriad Pro', sans-serif;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    padding: 15px 50px;
    letter-spacing: 1px;
    outline: none;
}
.heading-invoice{
    padding: 24px 0px;
    background-color: #1849A0;
    color: #fff;
}
.heading-invoice img{
    float: left;
    padding-left: 25px;
}
.heading-invoice p{
    font-size: 24px;
    margin-bottom: 0;
    padding-top: 0;
    font-weight: 600;
    display: inline-block;
    padding-left: 170px;
}
.bgcolor{
   background-color: #f0f0f0;
}
.d-none{
    display: none;
}
.floating-label { 
  position:relative; 
  margin-bottom:20px; 
}
.floating-select {
  font-size:14px;
  padding:4px 4px;
  display:block;
  width:100%;
  height:30px;
  background-color: transparent;
  border:none;
  border-bottom:1px solid #757575;
}
.floating-select:focus {
     outline:none;
     border-bottom:2px solid #5264AE; 
}
.payment_portal .form-group.floating-label select,
.modal-body .form-group.floating-label select{
    margin-bottom: 25px;
}
.modal-body .form-group.floating-label select{
    margin-top: 15px;
}
.payment_portal .makepayment-con-area .form-group.floating-label label,
.modal-body .makepayment-con-area .form-group.floating-label label {
    font-family: 'Open Sans', sans-serif;
    color: #777777;
    font-size: 13px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:10px;
    top:12px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
.modal-body .makepayment-con-area .form-group.floating-label label{
    top: -4px;
}
.payment_portal .makepayment-con-area .form-group.floating-label .floating-select:focus ~ label ,
.payment_portal .makepayment-con-area .form-group.floating-label .floating-select:not([value=""]):valid ~ label ,
.modal-body .makepayment-con-area .form-group.floating-label .floating-select:focus ~ label ,
.modal-body .makepayment-con-area .form-group.floating-label .floating-select:not([value=""]):valid ~ label {
  top:-18px;
}

/* active state */
 .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
  width:50%;
}
/****  floating-Lable style end ****/

.select-wrap.floating-label:after{
    content: "\79";
    font-family: 'dashboard-icons';
    color: #777;
    position: absolute;
    right: 30px;
    bottom: 12px;
    vertical-align: middle;
    text-align: center;
    pointer-events: none;
    font-size: 14px;
}
.payment_portal.payment_standalone{
    padding: 35px 0 100px;
}

.payment_portal.payment_standalone input[type] + label[placeholder]{
    padding-left: 0px;
}
.invoice-sidebar{
    width: 275px;
    position: fixed;
    z-index: 1;
    top: 35px;
    background: #eee;
    overflow-x: hidden;
}
.invoice-total{
    font-size: 18px;
    font-weight: 600;
    color: #333;
    background-color: #fff7e8;
    padding: 10px 15px;
}
.invoice-total p{
    margin-bottom: 0px;
}
.total-amnt{
    color: #1849a0;
    font-weight: 600;
}
.paid-listing{
    padding: 30px;
    background-color: #fff;
}
.table-responsive .table {
    border: 1px solid #e9eff2;
    margin-bottom: 0px;
}
.table-responsive .table > thead {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(233, 239, 242);
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 1px 3px 0px rgba(238, 241, 243, 0.8);
}
.table_listing > thead > tr > th {
    color: #7d94a0;
    width: auto;
    font-size: 13px;
    padding: 15px 10px;
    border: 1px solid #e9eff2!important;
    font-weight: 400;
    letter-spacing: 0.5px;
}
.table-responsive .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f4f9fc;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f4f9fc;
}
.table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border: 1px solid rgb(233, 239, 242);
    color: #444444;
    font-size: 12px;
    font-weight: 400;
    width: auto;
    vertical-align: middle;
    padding: 10px 10px;
    word-break: normal;
}
.paid-listing .btn-primary {
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    margin-top: 5px!important;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 500;
    width: auto;
    color: #567c94;
    border: 1px solid #cad6dd;
    -webkit-border-radius: 90px !important;
    -moz-border-radius: 90px !important;
    border-radius: 90px !important;
    margin-right: 10px;
    padding: 6px 15px !important;
    display: inline-block;
    transition: all 0.3s;
}
.paid-listing .btn-primary:hover, .paid-listing .btn-primary:focus, .paid-listing .btn-primary:active{
    background-color: #034a8a !important;
    color: #ffffff;
    border: 1px solid #034a8a !important;
    -webkit-border-radius: 90px !important;
    -moz-border-radius: 90px !important;
    border-radius: 90px !important;
}
h2.table-heading{
    margin-top: 0;
    font-size: 24px;
    font-family: 'Myriad Pro', sans-serif;
    color: #333333;
    font-weight: 600;
    padding-bottom: 10px;
}
.btn-primary.update-btn{
    background-color: #00338e;
    color: #fff;
    border: 1px solid #00338e;
    width: auto;
    padding: 10px 20px;
    border-radius: 50px;
}
.ebill-desc p{
    font-size: 16px;
    padding: 15px 0;
}

.modal-body .makepayment-con-area{
    padding: 10px 0px 30px 0px;
}
.modal-body .ebill-desc{
    padding: 15px 30px 0px;
}
.ebill-desc .amount-details p{
    font-size: 13px;
    padding: 0;
}
.ebill-desc .amount-details span {
    padding-left: 10px;
    float: initial;
}
.modal-body .makepayment-con-area .amount-details{
    padding-left: 30px;
}
.makepayment-con-area i.dashboardicon-information{
    position: absolute;
    right: 22px;
    top: 13px;
    color: #ff9900;
    cursor: pointer;
}
.modal-body .makepayment-con-area .select-wrap.floating-label i.dashboardicon-information{
    right: 3px;
    top: -2px;
}
.makepayment-con-area .select-wrap.floating-label i.dashboardicon-information {
    right: 3px;
    top: 13px;
}
@media screen and (max-width: 992px){
.invoice-sidebar {
    width: 100%;
    position: initial;
}
.heading-invoice{
    text-align: center;
}
.heading-invoice p{
    padding-left: 0px;
}
.makepayment-con-area .form-group {
    margin-bottom: 20px;
}

.paid-listing-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
}
}