@media only screen and (max-width: 1280px){
  .div-TenantLedger .scroll_inner{width: 100%;} 
}

@media only screen and (max-width: 1200px){
  .scroll_inner{width: 1200px;} 
  .bdr-PmtHistory{height: auto;padding: 10px 0;}
}

@media only screen and (max-width: 1182px){
  .payField{width: 87%;}
}

@media only screen and (max-width: 1100px) {
  .checkbelow1024{display: block;height: 19px;}
  .checkbelow1024 input[type=checkbox]{width: 19px;height: 19px;}
  .desktopcheck{display: none;}
  .payField{width: 84%;}
  .nav-bar{padding-right: 0.7rem;}
}

@media only screen and (max-width: 1024px) {
.container-dashboard {min-height: calc(100vh - 180px);}
.myrental_scroll{max-height: calc(100vh - 393px);}
.body-padding{padding: 45px 20px 25px;}
.container{max-width: 100%;}
.checkboxlabel {display: inline-block !important; touch-action: manipulation;  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  user-select:none;}
  .checkboxlabel input[type=checkbox] { -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;}
.checkboxlabel :hover{pointer-events: none !important; display: inline-block !important;}
.checkboxlabel span :hover{pointer-events: none !important; display: inline-block !important;}
.pure-material-checkbox {cursor: pointer !important;}
.alert-div{margin: -7px 0 5px 35px;}
.payField{width: 82%;}
.autopayConfirmationText {margin-left: 0px;margin-top: 0px;}
.docuploaddiv a{margin-top: 46px; margin-left: -115px;
}

@media only screen and (max-width: 950px){
  .resp_font{font-size: 0.75rem!important;}
  .payField{width: 40%;}
}

@media only screen and (max-width: 991px){
  .spn-AutoPayInfo-EnabledWarning{display: block;width: 100%;margin-right: -10px;}
  .autopay-enabled-in{margin-left: 20px;}
  .docuploaddiv i{margin-top: 20px; margin-left: 340px;}
}

@media only screen and (max-width: 850px){
  .resp_font{font-size: 0.7rem!important;}
  .payField{width: 42%;}
}
@media only screen and (max-width: 810px){
  .resp_font{font-size: 0.7rem!important;}
  .payField{width: 44%;}
}

@media only screen and (max-width: 778px){
  .autopayConfirmationText {margin-left: 0px;margin-top: 0px;}
}

@media only screen and (max-width: 768px) {
.body-padding{padding: 30px 20px;min-height: 100vh;}
.container-MultiUser {min-height: calc(100vh - 170px);}
.scroll_sec {min-height: calc(100vh - 275px);}
.div-sub-units{padding: 15px 0;}
.div-StoreDetails{padding: 5px 0;}
.div-unitDetails{min-height: inherit;}
.content-container{min-height: calc(100vh - 65px);}
.div-tblpayHis{height: calc(100vh - 170px);}
.div-AutoPay {padding-top: 0;min-height: calc(100vh - 249px);align-items: center;}
.top_table,.unit_top_table{display: none;}
.docuploaddiv i{margin-top: 20px; margin-left: 340px;}
.docuploaddiv a{margin-top: 46px; margin-left: -115px;}

/*responsive table*/
/* Force table to not be like tables anymore */
.bottom_table,.bottom_table thead,.bottom_table tbody,.bottom_table th,.bottom_table td,.bottom_table tr,.unit_bot_table,.unit_bot_table thead,.unit_bot_table tbody,.unit_bot_table th,.unit_bot_table td,.unit_bot_table tr {display: block;}
/* Hide table headers (but not display: none;, for accessibility) */
.bottom_table thead tr,.unit_bot_table thead tr {position: absolute;top: -9999px;left: -9999px;}
.bottom_table tr,.unit_bot_table tr { border: 1px solid #ccc !important;margin-bottom: 10px;box-shadow: none !important; }
.bottom_table td,.unit_bot_table td {border: none;border-bottom: 1px solid #ccc;position: relative;padding-left: 50%;min-height: 49px;text-align: left !important;}
.bottom_table td:before,.unit_bot_table td:before {position: absolute;top: 9px;left: 15px;width: 45%;padding-right: 15px;white-space: nowrap;font-weight: bold;}
.bottom_table td::after,.unit_bot_table td::after{position: absolute;content: ":";left: 47%;top: 10px;}
/*Label the data*/
.bottom_table td:nth-of-type(1):before { content: "Account #"; }
.bottom_table td:nth-of-type(2):before { content: "Customer Name"; }
.bottom_table td:nth-of-type(3):before { content: "Address"; }
.bottom_table td:nth-of-type(4):before { content: "Phone #"; }
.bottom_table td:nth-of-type(5):before { content: "City"; }
.bottom_table td:nth-of-type(6):before { content: "State"; }

.unit_bot_table td:nth-of-type(1):before { content: "Select"; pointer-events: none !important; }
.unit_bot_table td:nth-of-type(2):before { content: "Unit #"; }
.unit_bot_table td:nth-of-type(3):before { content: "Lease #"; }
.unit_bot_table td:nth-of-type(4):before { content: "Gate Code"; }
.unit_bot_table td:nth-of-type(5):before { content: "Balance"; }
.unit_bot_table td:nth-of-type(6):before { content: "Paid Thru"; }
.unit_bot_table td:nth-of-type(7):before { content: "Status"; }
.unit_bot_table td:nth-of-type(8):before { content: "AutoPay"; }

.unit_detail_table{padding-left: 0 !important;padding-right: 0 !important;}
.myrental_scroll .Cls-BlurShadow.custom-checkbox.mb-2.mx-1{margin-left: 0 !important;margin-right: 0 !important;}
.cls-separator{height: 50px;}
#CPNIFrame{height: 815px !important;}
.myrental_scroll{max-height: calc(100vh - 403px);}
.div-MoveOut-date,.div-MoveOut-Reason, .form-control.div-MoveOut-Reason,.cls-MoveOut-Reason{width: 100%;}
.material-checkbox-background > span::before{border: 1px solid #064173;}
.material-checkbox-background > input:checked + span::before{border: 1px solid #064173;background: #064173;}
.material-checkbox-background-selfstoreageplus > span::before{border: 1px solid #1950A3;}
.material-checkbox-background-selfstoreageplus > input:checked + span::before{border: 1px solid #1950A3;background: #1950A3;}
.div-TenantLedger .scroll_inner{width: 100%;} 
.table-payHistory  {width: 100%;}
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
  }
  ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #C0C0C0;
  box-shadow: 0 0 1px rgba(255,255,255,.5);
  }
.third_party_payment_payField{width: 93%;}
.card-number iframe{width: 74% !important;}
.payField{width: 45%;}
.autopayConfirmationText {margin-left: 0px;margin-top: -150px;}
}
  
@media only screen and (max-width: 736px) {
.logo{max-width: 230px; }
.align-bottom{padding-top: 5px;}
.div-sub-units{padding: 15px 0;}
.div-StoreDetails{padding: 5px 0;}
.div-unitDetails {min-height: inherit;margin-bottom: 15px !important}
.bottom-shadow-autopay {width: 90%;};
.container{max-width: 100%;padding-bottom: 15px;}
.header_lft,.header_rgt{width: 100%;padding: 0 15px;}
.div-MoveOut-date,.div-MoveOut-Reason, .cls-MoveOut-Reason{width: 100%;}
.div-MoveOut-border{padding-bottom: 15px;}
.myrental_scroll,.div-tblpayHis{height: 200px;max-height: 200px;}
.fa-user,.fa-home,.fa-power-off,.fa-phone-alt.div-payment-header-logo,.fa-phone-alt.div-payment-header-logo,.fa-location-arrow.div-payment-header-logo,.fa-user-edit, .fa-user-edit, .fa-document-upload {width: 26px;height: 26px;}
.container-AutoPay{height: auto;}
.content-container{min-height: calc(100vh - 55px);}
.div-payment-border{min-height: 1px;}
.spn-Contact-Header{padding-top: 0;}
.btn-PayHistory-back{width: auto;}
.bottom_table td, .unit_bot_table td{padding-left: 42%;padding-top: 5px;padding-bottom: 5px;min-height: 32px;font-size: 13px;text-align: left !important;}
.bottom_table td:before, .unit_bot_table td:before{width: 40%;top: 6px;}
.bottom_table td::after, .unit_bot_table td::after{left: 40%;top: 5px;}
.scroll_sec {max-height: calc(100vh - 222px);}
.body-padding{padding: 20px !important;}
.cls-separator{height: 15px;}
.div-AutoPay {min-height: calc(100vh - 244px);}
.thead-purple th{padding: 7px 10px;}
.thead th{padding: 7px 10px;}
.autopayConfirmationText {margin-left: 0px;margin-top: -150px;}
.mobiledivheightout{min-height: 400px !important;}
.mobiledivheightinner{min-height: 400px !important;}
.mobiledivheightinner2{min-height: 430px !important;}
}

@media only screen and (max-width: 600px) {
  .autopayConfirmationText {margin-left: 0px;margin-top: 0px;}
  .docuploaddiv i{margin-top: 20px; margin-left: 250px;}
}
  

@media only screen and (max-width: 550px) {
.container-dashboard{display: flex;flex-direction: column;justify-content: space-between;}
.myrental_scroll{height: 426px;max-height: 424px;}
.footer-resp{display: block;}
.autopopulate-check{width: 100%;margin-bottom: 0.5rem !important;}
.third_party_payment_payField{width: 87%;}
.docuploaddiv i{margin-top: 20px; margin-left: 230px;}
}

@media only screen and (max-width: 568px) {
  .title{font-size: 18px;}  
  .autopayConfirmationText {margin-left: 0px;margin-top: 0px;}
}

@media only screen and (max-width: 432px) {
  .payField{width: 81%;margin-right: 28px !important;}
}
  
  
@media only screen and (max-width: 420px) {
.fa-2x {font-size: 1.89em;}
.container-MultiUser {min-height: calc(100vh - 170px);}
.scroll_sec {min-height: calc(100vh - 230px);}
.div-dashboardFirst,.div-dashboardMid,.div-dashboardLast{height: 153px;}
.logo{max-width: 200px;}
.header_lft{text-align: center;}
.header_rgt{margin: 5px 0;}
.div-tblpayHis{height: 220px;}
.div-TenantLedger .spn-Contact-Header{padding-top: 0;}
.myrental_scroll{height: 408px;max-height: 408px;margin: 0;}
.div-tblpayHis {height: 256px;max-height: 256px;}
.content-container {min-height: calc(100vh - 65px);}
.div-dashboardFirst, .div-dashboardMid, .div-dashboardLast{height: 140px;}
.container-dashboard {min-height: calc(100vh - 205px);}
.bottom_table td, .unit_bot_table td{padding-left: 44%;text-align: left !important;}
.div-AutoPay{min-height: calc(100vh - 336px);padding-right: 0px;}
.cls-loc{padding-top: 15px;}
.div-TenantLedger .scroll_inner{width: 462px;} 
.table-payHistory{width: 100%;}
.payment-cols{display: inline-block;}
html, #secure-payment-field-body, #secure-payment-field-wrapper{width: 95% !important;}
.payField{width: 90%; float: left !important;}
.docuploaddiv i{margin-top: 20px; margin-left: 180px;}
}

@media only screen and (max-width:415px) and (height:896px) {
  .payField{width: 88%; float: left !important;}
}


@media only screen and (max-width:392px) {
  .payField{width: 95%; float: left !important;}
}


@media only screen and (max-width:380px) {
  .div-AutoPay{min-height: calc(100vh - 360px);}
  .payField{width: 100%;}
}

@media only screen and (max-width: 320px) {
  .myrental_scroll, .div-tblpayHis {height: 200px;max-height: 200px;}
  .div-AutoPay{min-height: calc(100vh - 360px);}
}
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .autopayConfirmationText label {
    max-width: 850px;
  }
  .docuploaddiv i{
    margin-left: 127px;
    margin-top: 20px;
  }
}