/* CSS Worked on Mobile Landscape View */
@media only screen and (min-width: 320px) and (max-width:1199px) {
    #container{
        min-width: 100%;
    }
    #body{
        padding: 24px;
        min-width: inherit;
    }
    #brand_logo{
        position:inherit;
        margin: 0;
    }
    #container #main-body #main-logos{
        min-width: 100%;
    }
    #flash{
        position: inherit;
        background: #fff;
    }
    #flash #message{
        max-width: 90%;
        font-size: 15px;
        line-height: 24px;
    }
    #renter_payment_information .clear{
        display: none;
    }
    #renter_payment_information .echeck_container.w100 .clear{
        display: block;
    }
    #renter_payment_information{
        position: relative;
    }
    /* Main Menu */
    #main-menu{
        min-width: auto;
        display: flex;
        flex-wrap: wrap;
    }
    #main-menu div.small_menu{
        flex-grow: 1;
    }
    #content h2.top-heading{
        text-align: center;
        margin: 25px 0 0 0;
    }
    .autopay_line table tr td{
        font-size: 14px;
    }
    a.help_icon{
        margin-top: 5px;
    }
    .field,
    .ui-selectmenu-menu-dropdown li a,
    span.ui-selectmenu-button span.ui-selectmenu-text{
        font-size: 14px !important;
        line-height: 20px;
        padding-left: 5px;
        color: #424242;
    }
    #newaccount_workspace div#account_type_tabs .ui-tabs-panel .flabel.infield{
        font-size: 13px;
        line-height: 34px;
        color: #424242;
    }
    #newaccount_workspace div#account_type_tabs .ui-tabs-panel p .flabel.infield{
        line-height: 25px;
    }
    .round_box_header,
    .round_box_title p{
        padding: 10px;
    }
    .hallow_box.panel .round_box_title p{
        padding: 10px 20px;
        margin: 0;
        padding-bottom: 0;
        font-size: 17px;
        font-weight: bold;
        color: #6b6b6b;
        margin-top: 8px;
    }
    .w95 {
        width: calc(100% - 12px);
    }
    .round_box_content.add_another_autopay{
        text-align: center;
    }
    .sm_button.editaccount,
    #card_accounts_grid p{
        margin: 0 !important;
    }
    .debit_visa_logo{
        width: 43px;
    }
    .visa_logo{
        width: 40px;
        background-size: cover;
    }
    .myacountProfile .field,
    .rentReminders .field{
        width: calc(100% - 12px) !important;
    }
    .myacountProfile .field.w100.ui-selectmenu,
    .rentReminders .ui-selectmenu.field{
        width: calc(100% - 2px) !important;
    }

    .myacountProfile .digit_3.field,
    .rentReminders .digit_3.field{
        width: 25px !important;
    }
    .myacountProfile .digit_4.field,
    .rentReminders .digit_4.field{
        width: 32px !important;
    }
    .myacountProfile .float_left.w100,
    .myacountProfile .w50.float_left,
    .myacountProfile .float_left.w30,
    .myacountProfile .float_left.w45{
        margin-bottom: 10px;
    }
    .myacountProfile .text_grey.w100.float_left{
        margin-bottom: 0px;
    }
    .round_box_content{
        text-align: left;
    }
    .customar-contact-details.login-customar-support{
        margin-top: 30px;
    }
    #echk_billing_address .field.ui-selectmenu,
    #echk_billing_address .ui-selectmenu{
        width: calc(100% - 2px);
        padding-right: inherit !important;
    }
    #echk_billing_address .field{
        width: calc(100% - 12px);
    }
    #quickpayment_workspace{
        z-index: 2;
        display: none;
    }
    .table-responsive table td p{
        margin: 0;
    }
    .table-responsive table td.word-break{
        word-break: break-word;
    }
    #addCardLogo{
        margin-top: 10px;
        margin-left: 0;
    }

}
/* CSS Worked on Mobile Landscape View */
@media only screen and (min-width: 320px) and (max-width:359px) {
    #exp_year-button,
    #exp_month-button{
        width: 100% !important;
        position: relative;
    }
    .flabel{
        font-size: 11px;
    }
    #main-menu a{
        background-size: 95% !important;
        width: 140px !important;
        margin:0 auto;
    }
    .printable .sm_button{
        font-size: 13px !important;
    }
    #main-menu div.small_menu{
        margin:6px 0 !important;
        width: 100% !important;
    }
    .autopay_skip_dates_dialog,
    #newPaymentMethod,
    .autopay_delete_dialog,
    .modal_large,
    #confirmPayment{
        width: 260px !important;
        height: 400px !important;
        overflow: auto;
    }
    iframe #header h1{
        font-size: 18px;
    }
    iframe #header p{
        font-size: 15px;
        line-height: 21px;
    }

    .modal_large .round_box_content{
        padding: 0;
    }
    .round_box_content{
        padding: 10px;
    }
    .autopay_line .next_payment tr td{
        font-size: 13px;
    }
    .autopay_skip_dates_dialog{
        max-height: 480px;
    }
    .table-responsive table tr td .sm_button{
        width: auto !important;
    }
    .table-responsive table td:before{
        width: 28%;
    }
    .myacountProfile .digit_3.field,
    .rentReminders .digit_3.field{
        width: 20px !important;
    }
    .myacountProfile .digit_4.field,
    .rentReminders .digit_4.field{
        width: 22px !important;
    }
    .round_box_title p{
        padding: 10px !important;
    }
    .hallow_box.panel .round_box_title p{
        padding: 10px 10px 0 10px !important;
        margin: 0;
        margin-top: 6px;
    }
    .myaccount .round_box_title p{
        padding: 20px 10px 0 10px;
    }
    .table-responsive table td:before{
        width: 40%;
    }
}
@media only screen and (min-width: 700px) and (max-width:850px) {
    #amount_panel .tabs_container .tabs > div a{
        padding: 0 5px !important;
    }
    .tabs_container .tabs > div:first-child + div{
        margin: 0 1% !important;
    }
    #amount_panel .tabs_container .tabs > div{
        width: calc(33% - 5px) !important;
    }
    .flabel.infield {
        font-size: 13px !important;
    }
}
/* CSS Worked on Mobile Landscape and portrait  View */
@media only screen and (min-width: 320px) and (max-width:699px) {
    #autopay_total td:nth-child(1){width:180px;}
    #brand_logo {
        padding: 12px 0 0 24px;
    }

    div#header .name{
        padding-left: 24px;
    }
    .top_header.text_header.nav{
        padding-right: 24px;
    }
    body:has(#partner_logo) #rp-logo #brand {
        width: 180px;
        height: auto;
    }
    @supports not (selector(body:has(#partner_logo))) {
         #rp-logo #brand {
            width: 180px;
            height: auto;
        }
    }
    #rp-logo #brand {
        width: 260px;
        height: auto;
    }
    div#header .name {
        padding: 0;
        width: 100%;
        text-align: center;
        margin-top: -31px;
    }
    div#header .name span{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .top_header.text_header.nav{
        position: inherit;
        width: 100%;
        float: left;
        margin-top: -1px;
        padding: 0;
        text-align: center;
    }
    .header_button{
        display: inline-block;
        float: none;
    }

    .paymentCompleted .emailtext{font-size:12px;}

    /* PAYMENT SUMMARY */
    #renter_payment_information,
    #renter_information{
        min-width: 100%;
        position: relative;
    }
    #payment_method,
    #payment_summary{
        width: 100%;
        min-width: 100%;
        margin: 20px 0 0 0;
    }
    /* Footer */
    div#footer{
        padding:24px;
        padding-bottom: 0;
        height: auto;
    }
    #yapstone{
        width: 100%;
        background-size: contain;
        float: left;
        margin-bottom: 25px;
        background-position: center;
    }
    div#footer p{
        margin-top: 15px;
        line-height: 20px;
        text-align: center;
    }
    div#footer p#legal{
        line-height: 25px;
    }
    #partner_name{
        position: inherit;
    }
    .round_box{
        line-height: 18px;
    }
    #multiPersonRequirements ul{
        margin-left: 0;
    }
    .text_large.text_blue .autopay_icon{
        float: left;
        height: 63px;
        margin-right: 10px;
    }
    #echk_billing_address_form .float_right.w40 .align_right{
        float: none;
        margin-bottom: 50px;
    }

    /* Login */
    #login_box,
    #new_user_box{
        width: 100%;
        padding: 0;
        float: left;
        min-height: auto;
    }

    #login_box form,
    #new_user_box form{
        padding: 20px;
    }
    #login_box .field,
    #new_user_box .field{
        width: 97%;
    }
    #new_user_box{
        margin-top: 20px;
    }
    #new_user_box h2.section-title{
        margin-bottom: 0;
        margin-top: 20px;
    }
    .app-download{
        margin-top: 20px;
        width: 100%;
        float: left;
    }
    .app-download table td{
        width: 100% !important;
        float: left;
        margin: 0 !important;
        text-align: center;
    }
    .app-download table td img{
        width: 100%;
    }
    .app-download table * div{
        display: inline-block !important;
        float: none !important;
    }
    .login-customar-support{
        float: left;
        text-align: center;
        font-size: 17px;
        border-top: 1px solid #d4d4d4;
        padding: 20px 24px 20px 24px;
        margin: 0 -24px;
        background: #f6f6f6;
    }
    .header_button{
        float: none !important;
    }
    #quickpayment_workspace{
        position: absolute;
        width: 100%;
        left: 0;
        margin-top: -30px;
    }
    #quickpayment_workspace div#account_tabs{
        width: 100%;
        border-radius: 3px;
        display: none;
        padding: 0;
        float: left;
        z-index: 999;
    }
    #quickpayment_workspace li{
        border: 3px solid #d2d2d2 !important;
        border-radius: 5px !important;;
    }
    .cc_container{
        padding: 15px;
    }
    .float_left.w60{
        width: 100%;
    }
    .float_right.w40{
        width: 100%;
        float: left;
        margin-top: 20px;
    }
    .float_right.w40 #billing_summary{
        padding: 0;
    }
    .float_right.w40 .align_right{
        width: 100%;
        float: left;
        margin-bottom: 20px;
    }
    #echk_billing_address.float_right.w40 .align_right{
        float: none;
    }
    .float_right.w40 .auto_button.blue{
        margin-left: 20px;
    }
    #quickpayment_workspace div#account_tabs ul{
        margin-top: 20px;
    }
    .ui-tabs .ui-tabs-nav{
        padding: 0;
    }
    #quickpayment_workspace div#account_tabs ul li{
        width: 90%;
        margin: 0 auto;
        float: none;
        margin-bottom: 10px;
    }
    #quickpayment_workspace #account_tabs p.section.text_blue{
        margin-top: 20px !important;
        width: 100%;
        float: left;
    }
    #quickpayment_workspace div#account_tabs ul li{
        overflow: auto;
    }
    #exp_year-button, #exp_month-button {
        width: 100px;
    }
    .float_left.w60 .echeck_container.w100{
        width: auto
    }
    .text_small.w15.float_left{
        width: 30%;
    }
    .float_right.echeck_propname{
        width: 70%;
        font-size: 13px;
    }
    .float_right.w35{
        width: 100%;
        float: left;
    }
    .float_right.w35 #echk_billing_summary{
        padding: 25px 0;
    }
    #bank_type_panel{
        margin-bottom: 20px;
        width: 79%;
    }
    .echeck_container.w100 tr{
        display: flex;
        flex-direction: column;
    }
    .echeck_container.w100 tr .w100 {
        width: 94%;
    }
    .echeck_container.w100 tr .w40{
        width: 100%;
    }
    #quickpayment_workspace .tabs ul li a{
        height: 31px;
        width: 96%;
    }
    #billing_form.round_box{
        padding:15px !important;
    }
    #billing_form.round_box .field{
        width: calc(100% - 12px);
    }
    #billing_form.round_box .ui-selectmenu{
        width: calc(100% - 2px);
    }
    #billing_form.round_box .align_right{
        float: none;
    }
    /* Main Menu */
    #main-menu div.small_menu{
        width: 40%;
        margin:6px;
    }
    #main-menu div.small_menu:nth-child(even){
        margin-right: 0;
    }
    #main-menu div.small_menu:nth-child(odd){
        margin-left: 0;
    }
    #main-menu a{
        width: 110px !important;
        background-position: center center !important;
        background-size: 95% !important;
        margin: 0 auto;
    }
    /* MANAGE YOUR AUTOPAY */
    .autopay_item{
        width: 100%;
        margin-top: 5px;
        margin-bottom: 20px;
    }
    .autopay_item .panel{
        margin: 0;
    }
    .autopay_list.printable .align_right{
        text-align: center;
    }
    .setup_autopay.printable .autopay_right_pan_width,
    .autopay_left_pan_width,
    .setup_autopay #amount_panel{
        width: 100%;
    }
    .tabs_container .tabs > div{
        width: 60%;
    }
    .setup_autopay #amount_panel #payment-method{
        display: block;
        margin-top: 35px;
    }
    .setup_autopay #amount_panel #disclaimer p{
        margin:0;
    }
    .setup_autopay #amount_panel #disclaimer{
        margin-top: 30px;
    }
    #autopay_cancel_submit_button_container{
        text-align: center;
        margin-top: 20px;
    }
    .setup_autopay #amount_panel #payment-method div{
        display: block;
        padding: 5px 0;
        box-sizing: border-box;
        width: 100%;
        text-align: center;
    }
    .text_default_size_green{
        white-space: normal;
    }
    .rpdialog{
        /* margin-left: 6px;*/
        position: fixed !important;
    }
    .autopay_skip_dates_dialog table th,
    .autopay_skip_dates_dialog table td{
        font-size: 16px;
    }
    .round_box_content .text_large_blue{
        font-weight: bold;
        font-size: 15px;
    }
    .autopay_skip_dates_dialog,
    #newPaymentMethod,
    .autopay_delete_dialog,
    .modal_large,
    #confirmPayment{
        width: 300px;
        height: 450px;
    }
    iframe #header h1{
        font-size: 18px;
    }
    iframe #header p{
        font-size: 15px;
        line-height: 21px;
    }
    .modal_large .round_box_content{
        padding: 0;
    }
    #newaccount_workspace div#account_type_tabs{
        width: 96%;
    }
    #newaccount_workspace div#account_type_tabs .ui-tabs-panel{
        padding: 12px;
    }
    #newaccount_workspace div#account_type_tabs .ui-tabs-panel .float_left.w50,
    #newaccount_workspace div#account_type_tabs .ui-tabs-panel #billing_address{
        width: 100%;
    }
    #newaccount_workspace div#account_type_tabs .ui-tabs-panel #billing_address #billing_summary{
        padding: 25px 0 0 0;
    }
    #newaccount_workspace div#account_type_tabs .ui-tabs-panel .align_center{
        text-align: left;
    }
    #newaccount_workspace div#account_type_tabs ul li.tabheading{
        width: 96%;
        font-size: 18px;
        height: 30px;
        padding-left: 5px;
    }
    #newaccount_workspace .blue.w40{
        padding: 7px 30px;
        width: auto;

    }
    #newaccount_workspace div#account_type_tabs ul li.ui-tabs-selected{
        width: 96%;
    }
    #newaccount_workspace div#account_type_tabs ul li.ui-state-default,
    #newaccount_workspace div#account_type_tabs ul li.active{
        border-radius: 5px !important;
        border: 2px solid #aeaeae !important;
        width: 96%;
        margin-bottom: 6px;
        overflow: auto;
    }
    #newaccount_workspace div#account_type_tabs ul li a,
    #newaccount_workspace .float_right.w60{
        width: 100%;
    }
    .autopay_delete_dialog.modal .round_box_content{
        width: 96%;
        padding: 10px 7px;
        overflow: hidden;
    }
    .autopay_delete_dialog.modal .overflow{
        overflow: auto;
    }
    .rentReminders .round_box_content{
        text-align: left;
    }
    /* MANAGE RENT REMINDERS */
    .printable .w50.float_left{
        width: 100%;
        margin-bottom: 20px;
        margin-right: 0;
    }
    .printable .float_left.w80,
    .printable .reminders,
    .printable #textReminderFormContainer,
    .printable #emailReminderFormContainer,
    .printable .float_left.w70{
        min-width: 100%;
        width: 100%;
    }
    .printable .sm_button{
        margin: 10px 0;
        padding: 10px 8px;
        font-size: 15px;
    }
    #mp_learn_more{
        margin: 0;
    }

    /* My Account */
    .menu.float_left{
        width: 100%;
        margin:0;
    }
    .myaccount .content{
        width: 100%;
        margin-top: 20px;
    }
    .menu.float_left .mobileMenu{
        width: 100%;
        float: left;
        margin-bottom: 20px;
        background:#4e74c9 url(../images/menu.png) 12px center no-repeat;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        height: 36px;
        background-size:24px;
    }
    .round_box_no_padding.hallow_box.mobileView{
        height: 0;
        transition:height 1s;
        border: none;
        border: 1px solid #ccc;
    }
    .round_box_no_padding.hallow_box.mobileView.openView{
        transition: height 1s;
        height: 220px;
    }
    .myaccount{
        position: relative;
    }
    .myacountProfile .rightPanel{
        margin-top: 20px !important;
    }
    .myacountProfile .field.snnCode{
        width: 50px !important;
    }
    .myacountProfile .text_grey.w100.float_left{
        margin: 0;
    }
    .myaccount .section.heading.text_large_blue{
        position: relative;
        color: #fff;
        z-index: 2;
        margin-right: 20px;
        top: 4px;
        display: inline-block;
        float: right;
    }
    .myaccount .float_left.w55.margin_right_20,
    .myaccount .float_left.w40,
    .myacountProfile .w100{
        margin: 0;
        width: 100%;
    }
    .myaccount .round_box_title p,
    .rentReminders .round_box_title p{
        padding: 20px 20px 0 20px;
    }
    .myaccount .menu ul{
        margin-top: 6px;
    }
    .setup_autopay .autopay_line label{
        text-align: left;
    }
    .myaccount .round_box_content{
        text-align: left;
    }
    .myacountProfile .digit_3.field,
    .rentReminders .digit_3.field{
        width: 25px !important;
    }
    .myacountProfile .digit_4.field,
    .rentReminders .digit_4.field{
        width: 32px !important;
    }
    #loginpass .field{
        width: calc(100% - 12px);
        margin-top: 5px;
    }
    #howDoesItWorkPhone{
        left: 50% !important;
        transform: translateX(-50%);
        height:590px;
    }
    .echeck_container.light_blue_box .field{
        width: calc(100% - 12px);
    }
    .echeck_container.light_blue_box table.grid tr td{
        width: 100%;
        float: left;
    }
    #newPaymentMethod #echk_billing_summary{
        padding: 0;
    }
    #editableInformationDiv .w70{
        width: 100%;
    }
    #editableInformationDiv .round_box.hallow_box{
        width: 100%;
        border: none;
        padding: 0;
    }
    #editableInformationDiv #creditReportTable,
    #editableInformationDiv .w100{
        width: 100%;
        margin: 0;
    }

    #editableInformationDiv .field{
        width: calc(100% - 12px);
        margin-bottom: 10px;
        margin-top: 4px;
    }
    #editableInformationDiv .field#ssn3{
        width: auto;
    }
    #editableInformationDiv #dob_day-button,
    #editableInformationDiv #dob_month-button,
    #editableInformationDiv #dob_year-button{
        margin-bottom: 10px;
        width: 104px;
    }
    #editableInformationDiv table td table {
        width: 100%;
    }
    #myaccount_creditreporting_optout .w95.round_box_content{
        width: auto;
    }
    .myaccount .section.heading.text_grey.align_left{
        color: #666;
        width: 100%;
        margin-left: 0;
    }
    .autopay_item .message_icon{
        margin-left: calc(50% - 50px);
    }
    #echk_billing_address #echk_billing_form{
        padding-top: 13px;
    }
    #echeck_tab .field{
        width: calc(100% - 12px);
    }
    #echeck_tab .field.ui-selectmenu,
    #echeck_tab .ui-selectmenu{
        width: calc(100% - 2px);
        padding-right: inherit !important;
    }
    #billing_form{
        margin-top: 20px;
    }

    /* Split With Roommates Auto Pay */
    #amount_panel .tabs_container .tabs > div{
        width: 100%;
        margin:0 0 5px 0;
    }
    #amount_panel .tabs_container .tabs > div a{
        border: 1px solid #ccc;
        border-radius: 10px;
    }
    .autopay_multiperson_line{
        margin-top: 20px;
    }
    .autopay_multiperson_line #slider{
        width: calc(100% - 93px);
        margin-bottom: 20px;
    }
    .autopay_multiperson_line div#slider + input{
        margin-left: 15px;
    }

    .ui-widget-overlay{
        width: 100% !important;
    }
    .ui-dialog{
        transform: translateX(-50%);
        width: 90% !important;
        left: 50% !important;
    }
    .ui-draggable .ui-dialog-titlebar{
        font-size: 18px;
    }
    #confirmPayment .float_left.w55,
    #confirmPayment .float_left.w50,
    #confirmPayment .float_right.w50,
    #confirmPayment .float_right.w45,
    #confirmPayment .float_left.w45,
    #confirmPayment .float_right.w55{
        width: 100%;
        margin-bottom: 20px;
    }
    #confirmPayment .sm_button{
        width: 100%;
        padding: 8px 0px;
        font-size: 19px;
        margin: 0;
        margin-top: 15px;
    }
    #confirmPayment .text_large, #confirmPayment .text_large td{
        font-size: 18px;
    }
    #confirmPayment #confirm_renter_information,
    #confirmPayment #confirm_payment_method,
    #confirmPayment #confirm_payment_summary{
        margin: 0;
    }
    .tooltip{
        width: 140px;
    }
    .tooltip .cvv_logo{
        width: 140px;
        height: 94px;
        background-size: contain;
        display: block;
    }
    .tooltip table.grid tr td{
        width: 100%;
        float: left;
    }
    #payment_receipt.w50,
    .reminderSection,
    .reminderSection #payment_reminder_autopay{
        width: 100%;
        margin: 0;
    }
    .reminderSection .w100.round_box.hallow_box{
        width: calc(100% - 42px);
    }
    .reminderSection .text_large_blue{
        margin-bottom: 20px;
        line-height: 24px;
    }
    .reminderSection .textfield,
    .reminderSection .phone{
        width: 100%;
        float: left;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .reminderSection .phone
    .reminderSection .field.w50{
        width: calc(100% - 12px);
        margin-bottom: 7px;
    }
    .reminderSection .phone .textfield{
        width: auto;
    }

}
@media only screen and (min-device-width:480px) and (max-device-width: 736px) and (orientation : landscape) {
    #confirmPayment{
        height: 240px;
    }
}
@media only screen and (min-width:320px) and (max-width: 430px) {
    #myaccount_profile .city-col,
    #myaccount_profile .state-col{
        width: 100%;
        margin:0;
    }
    #myaccount_profile .city-col .w45{
        width: 96%;
    }
    .flabel{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 91%;
        text-align: left;
    }
    .section-title{
        font-size: 20px;
    }
    .setup_autopay #amount_panel table tr th,
    .setup_autopay #amount_panel table tr td{
        padding: 5px 3px;
        font-size: 13px;
    }
    #editableInformationDiv #dob_day-button,
    #editableInformationDiv #dob_month-button,
    #editableInformationDiv #dob_year-button{
        width: 44% !important;
        margin-bottom: 10px;
    }
    .table-responsive table tr td.valign_middle img{
        width: 50%;
    }
    .table-responsive table tr td.valign_middle span.payment_method_logo img{
        width: inherit;
    }
    #textReminderForm span.text_blue{
        width: 70px;
        display: inline-block;
        position: relative;
        top: 9px;
    }
    .reminderSection .textfield .field.w50{
        width: calc(100% - 12px);
    }


}
@media only screen and (min-width:700px) and (max-width: 950px) {
    .myaccount{
        position: relative;
        width: 100%;
    }
    .menu.float_left .mobileMenu {
        width: 100%;
        float: left;
        margin-bottom: 20px;
        background: #4e74c9 url(../images/menu.png) 12px center no-repeat;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        height: 36px;
        background-size: 24px;
    }
    .round_box_no_padding.hallow_box.mobileView{
        height: 0;
        transition:height 1s;
        border: 1px solid #ccc;
    }
    .round_box_no_padding.hallow_box.mobileView.openView{
        transition: height 1s;
        height: 220px;
        border: 1px solid #ccc;
    }
    .myaccount .section.text_large_blue{
        position: relative;
        z-index: 2;
        color: #fff;
        display: inline-block;
        top: 4px;
        width: auto;
        float: right;
        margin-right: 20px;
    }
    .myaccount .menu{
        width: 100%;
    }
    .myaccount .content {
        width: 100%;
        margin-top: 20px;
    }
    #newPaymentMethod{
        width: 615px !important;
    }
    #newPaymentMethod .ui-tabs-panel{
        padding: 1em 10px;
    }
    #newaccount_workspace div#account_type_tabs ul li.tabheading{
        width: 96%;
    }
    #newaccount_workspace div#account_type_tabs ul li.ui-state-default,
    #newaccount_workspace div#account_type_tabs ul li.active{
        float: left;
    }
    #newaccount_workspace div#account_type_tabs ul{
        width: 98%;
    }
    .round_box_no_padding.hallow_box.mobileView{
        position: absolute;
        width: 99.8%;
        z-index: 2;
        margin-top: 6px;
        border-radius: 0 0 5px 5px;
    }
    .myaccount .printable{
        width: calc(100% - 2px);
        margin-top: 9px;
    }
    .myaccount .round_box_content{
        text-align: left;
    }
    #loginpass .field{
        width: calc(100% - 12px);
        margin-top: 5px;
    }
    .myaccount .content {
        width: 61%;
        margin-top: 20px;
        float: right;
    }
    .myaccount .float_left.w55.margin_right_20,
    .myaccount .float_left.w40{
        margin: 0;
        width: 100%;
    }
    .myaccount .text_grey.w100.float_left{
        margin: 0;
    }

    .myacountProfile .float_left.w50,
    .myacountProfile .float_left.w60{
        margin-left: 0 !important;
        width: 100% !important;
    }
    .myacountProfile .float_left.w100,
    .myacountProfile .w50.float_left,
    .myacountProfile .float_left.w30,
    .myacountProfile .float_left.w45{
        margin-bottom: 10px;
    }
    .myacountProfile .rightPanel{
        margin-top: 20px !important;
    }
    .myacountProfile .field.snnCode{
        width: 50px !important;
    }
    .echeck_container.light_blue_box table.grid tr td{
        width: 100%;
        float: left;
        margin-bottom: 10px;
    }
    .echeck_container.light_blue_box .field{
        width: calc(100% - 12px);
    }
    .echeck_container.light_blue_box #bank_type_panel{
        width: 60%;
    }
    .echeck_container.light_blue_box .w15.float_left{
        width: 28%;
    }
    .echeck_container.light_blue_box .float_right.w85{
        width: 56%;
    }
    #bank_type_panel.float_left.w40{
        width: 59%;
    }
    .ui-widget-overlay{
        width: 100% !important;
    }
    .ui-dialog{
        transform: translateX(-50%);
        width: 90% !important;
        left: 50% !important;
    }
    .ui-draggable .ui-dialog-titlebar{
        font-size: 18px;
    }


}
/* CSS Worked on Mobile Landscape and portrait  View */
@media only screen and (min-width: 521px) and (max-width: 699px) {
    div#header .name{
        padding-left: 24px;
        margin:0;
        width: 250px;
        text-align: left;
    }
    .top_header.text_header.nav{
        padding-right: 24px;
        width: auto;
        float: right;
    }
    div#header .name
}
/* CSS Worked on Tablet Landscape and portrait  View */
@media only screen and (min-width: 700px) and (max-width: 1024px) {
    #renter_payment_information {
        min-width: 100%;
    }
    #payment_summary {
        min-width: 100%;
        float: left;
        margin-top: 25px;
        margin-left: 0;
    }
    #renter_payment_information{
        display: flex;
    }
    #renter_payment_information #renter_information,
    #renter_payment_information #payment_method{
        width: inherit;
        flex: 1;
    }
    #renter_payment_information #renter_information{
        margin-right: 10px;
    }
    #renter_payment_information #payment_method{
        margin-left: 10px;
    }
    #quickpayment_workspace{
        width: 0;
    }
    div#footer p.copyright{
        margin-top: 15px;
    }
    #quickpayment_workspace{
        position: absolute;
        width: 100%;
        float: left;
        background: #fff;
        z-index: 999;
        left: 0;
    }
    #quickpayment_workspace div#account_tabs{
        padding-bottom: 20px;
        float: left;
        width: 99%;
    }
    #billing_summary {
        padding: 0 25px;
    }
    .cc_container{
        padding: 15px;
    }
    .float_right.w40 .auto_button.blue {
        margin-left: 20px;
    }
    .flabel.infield{
        font-size: 13px;
    }
    #echk_billing_summary{
        padding: 0px 20px;
    }
    .autopay_list.printable{
        display: flex;
        flex-wrap: wrap;
    }
    .section.heading{
        width: 100%;
    }
    .autopay_list.printable .autopay_item{
        float: left;
        width: 50%;
        margin-bottom: 20px;
    }
    .autopay_list.printable .autopay_item:nth-child(odd) .panel{
        margin: 0 0 0 10px;
    }
    .autopay_list.printable .autopay_item:nth-child(even) .panel{
        margin-right: 10px;
    }
    .autopay_item .round_box_no_padding.hallow_box {
        text-align: center;
    }
    .autopay_list.printable .autopay_item:nth-child(even) .round_box_no_padding.hallow_box{
        margin-right: 10px;
    }
    .autopay_list.printable .autopay_item:nth-child(odd) .round_box_no_padding.hallow_box{
        margin: 0 0 0 10px;
    }
    .autopay_list.printable .align_right{
        width: 100%;
    }
    .text_default_size_green{
        white-space: normal;
    }
    .autopay_item,
    .autopay_left_pan_width{
        width: 43%;
    }
    .setup_autopay #amount_panel,
    .autopay_right_pan_width{
        width: 56%;
    }
    .setup_autopay #amount_panel #payment-method{
        display: block;
    }
    .setup_autopay #amount_panel #payment-method div {
        display: block;
        padding: 5px 0;
        box-sizing: border-box;
        text-align: center;
        width: 100%;
    }
    .setup_autopay #amount_panel #payment-method{
        margin-top: 55px;
    }
    .setup_autopay #amount_panel #disclaimer{
        margin-top: 30px;
    }
    .setup_autopay #amount_panel #disclaimer p{
        margin:0;
    }
    #autopay_cancel_submit_button_container{
        text-align: center;
        margin-top: 25px;
    }
    .tabs_container .tabs > div{
        width: 52%;
    }
    .tabs_container .auto_button{
        margin-bottom: 10px;
    }
    #newPaymentMethod{
        width: 750px;
    }
    #textReminderForm #accountId-button{
        width: calc(100% - 2px);
    }
    .myaccount .menu {
        width: 35%;
    }
    .myaccount .content {
        width: 61%;
        float: right;
    }
    .myaccount{
        width: 100%;
    }
    #loginpass .field {
        width: calc(90% - 12px);
        margin-top: 5px;
    }
    #howDoesItWorkPhone{
        left: 30px !important;
    }
    .myaccount .round_box_title p{
        padding: 20px 20px 0 20px;
    }
    .pay-by-cash .float_left.w55,
    .pay-by-cash .float_left.w40{
        width: 100%;
        margin: 0;
    }
    #editableInformationDiv .w70{
        width: 100%;
    }
    #editableInformationDiv .round_box.hallow_box{
        width: 100%;
        border: none;
        padding: 0;
    }
    #editableInformationDiv #creditReportTable,
    #editableInformationDiv .w100{
        width: 100%;
        margin: 0;
    }

    #editableInformationDiv .field{
        width: calc(100% - 12px);
        margin-bottom: 10px;
        margin-top: 4px;
    }
    #editableInformationDiv .field#ssn3{
        width: auto;
    }
    #editableInformationDiv #dob_day-button,
    #editableInformationDiv #dob_month-button,
    #editableInformationDiv #dob_year-button{
        margin-bottom: 10px;
        width: 104px;
    }
    #editableInformationDiv table td table {
        width: 100%;
    }
    #myaccount_creditreporting_optout .w95.round_box_content{
        width: auto;
    }
    .setup_autopay .autopay_line label{
        text-align: left;
    }
    .autopay_multiperson_line #slider{
        width: calc(100% - 93px);
        margin-bottom: 20px;
    }
    /* Split With Roommates Auto Pay */
    #amount_panel .tabs_container .tabs{
        padding-right: 3px;
    }
    #amount_panel .tabs_container .tabs > div a{
        padding: 0 15px;
        font-size: 18px;
    }
    .autopay_multiperson_line{
        margin-top: 20px;
    }
    .autopay_multiperson_line #slider{
        width: calc(100% - 93px);
        margin-bottom: 20px;
    }
    .autopay_multiperson_line div#slider + input{
        margin-left: 15px;
    }
    .modal_large,
    #confirmPayment{
        width: 500px;
    }
    #confirmPayment{
        height: 500px;
        overflow: auto;
    }
    #confirmPayment .float_left.w55,
    #confirmPayment .float_left.w50,
    #confirmPayment .float_right.w50,
    #confirmPayment .float_right.w45,
    #confirmPayment .float_left.w45,
    #confirmPayment .float_right.w55{
        width: 100%;
        margin-bottom: 20px;
    }
    #confirmPayment .sm_button{
        width: 100%;
        padding: 8px 0px;
        font-size: 19px;
        margin: 0;
        margin-top: 15px;
    }
    #confirmPayment .text_large, #confirmPayment .text_large td{
        font-size: 18px;
    }
    #confirmPayment #confirm_renter_information,
    #confirmPayment #confirm_payment_method,
    #confirmPayment #confirm_payment_summary{
        margin: 0;
    }

}
@media only screen and (min-width:950px) and (max-width:1199px) {
    .myacountProfile .float_left.w60{
        width: calc(50% - 13px );
        margin-right: 13px;
    }
    .myacountProfile .float_left.w40.rightPanel{
        width: calc(50% - 13px );
        margin-left: 13px;
    }
    .myacountProfile .float_left.w50{
        width: 100% !important;
        margin-left: 0 !important;
    }
    .myacountProfile .field.snnCode{
        width: 70px !important;
    }
}

/* CSS Worked on Large Tablet Landscape and portrait  View */
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
    #payment_summary{
        width: 51.9%;
        float: right;
        margin-left: 30px;
    }
    #renter_payment_information{
        display: flex;
        float: left;
        width: 45%;
        flex-direction: column;
        min-width: inherit;
    }
    #renter_information,
    #payment_method{
        width: 100%;
        min-width: 100%;
        margin:0;
    }
    #payment_method{
        margin-top: 20px;
    }
    div#footer p.copyright{
        margin-top: 15px;
    }
    #quickpayment_workspace,
    .float_left.w60,
    .float_right.w40{
        width: 100%;
    }
    #echeck_card.float_left.w60{
        width: 59%;
    }
    #echk_billing_address.float_right.w40{
        width: 39%;
    }
    .float_right.w40 #billing_summary{
        padding: 25px 0;
    }
    #quickpayment_workspace div#account_tabs{
        float: left;
    }
    .cc_container{
        padding: 15px;
    }
    .float_right.w40 .align_right{
        margin-bottom: 20px;
    }
    .float_right.w40 .align_right .auto_button.blue{
        margin-left: 15px;
    }
    .echeck_container.w100{
        width: auto;
    }
    #echk_billing_address.float_right.w35{
        width: 100%;
        float: left;
    }
    #echk_billing_address.float_right.w35 #echk_billing_summary{
        padding: 25px 0;
    }
    #bank_type_panel.float_left.clear_left{
        margin-bottom: 20px;
    }
    .echeck_container.w100 .w100 {
        width: 96%;
    }
    .float_right.w30.text_small{
        text-align: right;
    }
    .app-download {
        width: 70%;
        float: left;
        margin: 0 auto;
        margin-top: 30px;
    }
    .autopay_item{
        width: 33.3%;
    }
    .autopay_item .flex-autopay {
        width: 100%;
    }
    .autopay_item:nth-child(4n) .panel{
        margin: 0;
    }
    .myaccount .menu {
        width: 35%;
    }
    .myaccount .content {
        width: 61%;
        float: right;
    }
    .myaccount{
        width: 100%;
    }
    #loginpass .field {
        width: calc(90% - 12px);
        margin-top: 5px;
    }
    .myaccount .round_box_title p {
        padding: 20px 20px 0 20px;
    }


}
@media only screen and (min-width: 700px) and (max-width: 1199px) {
    div#header .name{
        padding-left: 24px;
    }
    .top_header.text_header.nav{
        padding-right: 24px;
    }
    #brand_logo {
        padding: 12px 0 0 24px;
    }
    #content{
        flex-wrap: wrap;
    }
    /* Footer */
    div#footer{
        padding:24px;
        padding-bottom: 0;
        height: auto;
    }
    /* Login */
    #login_box,
    #new_user_box{
        width: 48%;
        padding: 0;
        float: left;
        min-height: auto;
        flex-grow: 1;
    }
    #login_box{
        margin-right: 10px;
    }
    #new_user_box{
        margin-left: 10px;
    }

    #login_box form,
    #new_user_box form{
        padding: 20px;
    }
    #login_box .field,
    #new_user_box .field{
        width: 97%;
    }
    #new_user_box h2.section-title{
        margin-bottom: 0;
        margin-top: 20px;
    }
    .app-download{
        margin-top: 30px;
        width: 100%;
        float: left;
    }
    .app-download table {
        width: 100%;
    }
    .app-download table td{
        margin: 0 !important;
        text-align: center;
        width: auto !important;
        vertical-align: middle;
        float: none !important;
    }
    .app-download table td .section-title{
        font-size: 22px;
    }
    .login-customar-support{
        float: left;
        text-align: center;
        font-size: 17px;
        border-top: 1px solid #d4d4d4;
        padding: 20px 24px 20px 24px;
        margin: 0 -24px;
        background: #f6f6f6;
    }

    /* Main Menu */
    #main-menu div.small_menu{
        width: 20%;
        margin:6px;
    }
    #main-menu div.small_menu:first-child{
        margin-left: 0;
    }
    #main-menu div.small_menu:last-child{
        margin-right: 0;
    }
    #main-menu a{
        width: 100px !important;
        background-size: 100% !important;
        background-position: center center !important;
        margin: 0 auto;
    }
    #content h2.top-heading{
        width: 100%;
    }
    #main-menu-container{
        width: 100%;
    }
    /* MANAGE RENT REMINDERS */
    .printable{
        width: 100%;
    }
    .rentReminders{
        display: flex;
    }
    .printable .float_left.w50{
        width: 50%;
        margin-left: 10px;
    }
    .printable .float_left.w50.margin_right_20{
        margin-right: 10px;
        margin-left: 0;
    }
    .printable .reminders{
        min-width: 100%;
    }
    .printable .float_left.w80,
    .printable .float_left.w70,
    .printable #emailReminderFormContainer,
    .printable #textReminderFormContainer{
        width: 100%;
    }
    .printable .sm_button{
        margin: 8px 0;
        padding: 10px;
        width: auto;
        font-size: 15px;
    }
    .printable .field.w100{
        width: calc(100% - 2px)
    }
    .text_default_size_green{
        white-space: normal;
    }
    .flabel.infield{
        font-size: 15px;
    }
    #newaccount_workspace div#account_type_tabs .ui-tabs-panel .align_center{
        text-align: left;
    }
    .rpdialog{
        margin-left: 6px;
        position: absolute !important;
    }

    #amount_panel .tabs_container .tabs > div{
        width: calc(33% - 11px);
        float: inherit;
        display: inline-block;
        vertical-align: bottom;
    }
    .ui-dialog{
        transform: translateX(-50%);
        left: 50% !important;
    }
    #payment_receipt.w50,
    .reminderSection{
        width: calc(50% - 15px);
        margin: 0;
    }
    .reminderSection #payment_reminder_autopay{
        width: 100%;
    }
    .reminderSection .w100.round_box.hallow_box{
        width: calc(100% - 42px);
    }
    .reminderSection .text_large_blue{
        margin-bottom: 20px;
        line-height: 24px;
    }
    .reminderSection{
        margin-left: 15px !important;
        flex-grow: 1;
    }
    #payment_receipt.w50{
        margin-right: 15px !important;
        flex-grow: 1;
    }
    #payment_receipt.w50 div:empty{
        display: none;
    }

    .reminderSection .textfield,
    .reminderSection .phone{
        width: 100%;
        float: left;
        margin-top: 10px;
        margin-bottom: 4px;
    }
    .reminderSection .field.w50{
        width: calc(100% - 12px);
        margin-bottom: 7px;
    }
    .titlecol{
        width: 100%;
        float: left;
    }
    .reminderSection .phone .textfield{
        width: auto;
    }
}
/* CSS Worked on Desktop View */
@media only screen and (min-width: 1200px){
    #quickpayment_workspace {
        width: 100%;
    }
    .float_left.w60 .cc_container{
        padding: 15px;
    }
    .float_right.w40 .align_right{
        margin-bottom: 20px;
    }
    .float_right.w40 .align_right .auto_button.blue{
        margin-left: 15px;
    }
    .login-customar-support{
        width: 60%;
        display: flex;
    }
    .login-customar-support div{
        flex-grow: 1;
    }
    .login-customar-support div:first-child{
        max-width: 90px;
        margin-right: 22px;
        vertical-align: middle;
        padding-top: 13px;
    }
    .app-download{
        width: 62%;
        margin-top: 28px;
    }
    #content h2.top-heading{
        text-align: center;
        margin: 25px 0 0 0;
    }
    .round_box_content.add_another_autopay{
        text-align: center;
    }
    #loginpass .field {
        width: calc(30% - 12px);
        margin-top: 5px;
    }

    .myacountProfile .float_left.w50.leftCol{
        margin-right: 10px;
        width: calc(50% - 10px);
    }
    .myacountProfile .float_left.w50.rightCol{
        margin-left: 10px;
        width: calc(50% - 10px);
    }
    .myacountProfile .field,
    .rentReminders .field{
        width: calc(100% - 12px);
    }
    .myacountProfile .field.ui-selectmenu,
    .rentReminders .field.ui-selectmenu{
        width: calc(100% - 2px);
    }
    .myacountProfile .float_left.w60{
        width: calc(55% - 15px);
        margin-right: 15px;
    }
    .myacountProfile .w40.rightPanel{
        width: calc(45% - 15px);
        margin-left: 15px;
    }
    .myacountProfile .digit_3.field,
    .rentReminders .digit_3.field{
        width: 30px !important;
    }
    .myacountProfile .digit_4.field,
    .rentReminders .digit_4.field{
        width: 40px !important;
    }
    .myacountProfile .postalCode,
    .myacountProfile .yourAddress{
        margin-right: 10px;
        width: calc(35% - 10px);
    }
    .myacountProfile .country{
        margin-left: 10px;
        margin-right: 0;
        width: calc(65% - 10px);
    }
    .myacountProfile .w100{
        width: 100%;
    }
    .myacountProfile .field.snnCode{
        width: 50px;
    }
    .myacountProfile .align_left{
        text-align: right;
    }
    .customar-contact-details.login-customar-support {
        width: 53%;
        position: relative;
        float: left;
        margin-top: -280px;
        z-index: 1;
    }
    #quickpayment_workspace{
        z-index: 2;
        float: left;
    }
    #amount_panel .tabs_container .tabs > div{
        width: calc(33% - 15px);
        float: inherit;
        display: inline-block;
        vertical-align: bottom;
    }
    .reminderSection{
        width: 48%;
        float: left;
    }
    .reminderSection #payment_reminder_autopay{
        width: 100%;
        float: left;
    }
    .reminderSection #payment_reminder_autopay .w100.round_box.hallow_box{
        width: calc(100% - 42px);
    }

}

/* Responsive Table CSS */
@media only screen and (min-width:320px) and (max-width: 610px), screen and (min-width:700px) and (max-width: 920px) {
    /* Responsive Table */
    .table-responsive table{
        margin-top: 20px;
    }
    .table-responsive table td{
        background: inherit;
        width: calc(100% - 21px);
        float: left;
        text-align: left;
        border-left: 0;
        font-weight: normal;
    }
    .table-responsive table td span{
        display: inline-block;
    }
    .table-responsive table td:before{
        content: attr(data-th) ": ";
        width: 30%;
        display: inline-block;
        text-align: right;
        padding-right: 15px;
        font-weight: bold;
        line-height: 15px;
        vertical-align: middle;
    }
    .table-responsive table th{
        display: none;
    }
    .table-responsive table tr:nth-child(odd){
        background: #f5f5f5;
    }
    .table-responsive table.payByCash tr:nth-child(even){
        background: #f5f5f5;
    }
    .table-responsive table tr td p{
        display: inline-block;
        margin: 0;
    }
    .table-responsive table tr td .sm_button{
        margin: 0 !important;
        width: auto !important;
        padding: 6px 9px !important;
    }
    .table-responsive table tr.lineitem td:before,
    .table-responsive table tr.invoice td:before{
        display: none;
    }
    .table-responsive table tr.invoice td{
        width: calc(100% - 10px);
    }
    .table-responsive table tr.lineitem td:nth-child(1){
        width: calc(35% - 10px );
        text-align: right;
    }
    .table-responsive table tr.lineitem td:nth-child(2){
        width: calc(65% - 10px )
    }
    .table-responsive table td img{
        vertical-align: middle;
        display: inline-block;
    }
    .sm_button.newaccount{
        margin: 0 auto !important;
        display: inherit;
        float: none;
        margin-bottom: 11px !important;
        position: relative;
    }
    p.text_italic .sm_button.newaccount{
        margin-top: 20px !important;
    }
    table.bordered tr.detail td,
    table.bordered tr.detail th{
        border-left: none;
    }
    .search_results table tbody tr td {
        display:block;
        text-wrap: wrap;
    }
    .search_results table td.align_right.valign_middle {
        border-top:0px;
    }
}
@media only screen and (min-width:921px) and (max-width: 1024px),
screen and (min-width:611px) and (max-width: 699px){
    .table-responsive table tr td.valign_middle img{
        width: 100%;
    }
    .table-responsive table tr td.valign_middle span.payment_method_logo img{
        width: inherit;
    }
}

/* EXTRA CSS */
.header_button{
    float: left;
}