/* For mobile : like samsung grand(480 * 800): */
/*TFS58418 : Start*/
@media only screen and (max-width : 539px) {
    body.account-selection {
        /*background-color:#D1D2D4;
        background-image:none*/
        background: url(../img/AE_24_Generic_Portal_Mobile_v1.jpg) no-repeat fixed;
        background-size: cover;
    }
    body.login {
        /*background-color:#D1D2D4;
        background-image:none*/
        background: url(../img/AE_24_Generic_Portal_Mobile_v1.jpg) no-repeat fixed;
        background-size: cover;
    }
}

@media only screen and (max-width : 1023px) and (min-width: 539px) {
    body.account-selection {
        /*background-color:#D1D2D4;
        background-image:none*/
        background: url(../img/AE_24_Generic_Portal_Tablet_v1.jpg) no-repeat fixed;
        background-size: cover;
    }
    body.login {
        /*background-color:#D1D2D4;
        background-image:none*/
        background: url(../img/AE_24_Generic_Portal_Tablet_v1.jpg) no-repeat fixed;
        background-size: cover;
    }
}
/*TFS58418 : End*/
@media only screen and (min-width : 480px) {
    /*#page-content {
        left: 0 !important;
    }

    #slidemenu {
        left: auto !important;
    }*/
}

@media only screen and (max-width : 1023px) {
    body,
    .navbar-fixed-top,
    .navbar-fixed-bottom {
        min-width: 100%;
        /*overflow: hidden;*/
    }

    body {
        /*overflow-x: hidden;*/
    }

        body.slide-active {
            padding-top: 0;
        }

    .container {
        width: auto !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    /*#slide-nav {
        left: 250px !important;
    }*/
/*    body.login {
        background-color:#D1D2D4;
        background-image:none
    }*/


    /*body.account-selection {*/
        /*background-color:#D1D2D4;
        background-image:none*/
    /*background: url(../img/paper-bg.jpg) ;*/ /* TFS46454*/
    /*}*/
    /*Commented for TFS58418*/

    .main-content-wrapper > .row {
        margin: 0;
    }

    #page-content.slide-active {
        padding-top: 0;
    }

    #page-content, .navbar, body, .navbar-heading {
        /*min-width: 240px;*/
        /*z-index: 999;*/
    }

    /***************************/
    /*  HEADER   */
    /***************************/

    #slide-nav {
        display: inline-block;
    }

        #slide-nav.slide-active .navbar-heading {
            margin: 0 auto;
            padding: 0 20px;
        }

    .navbar-heading {
        /*min-width: 300px;*/
        /*display: inline-block;*/
        position: relative;
        height: 60px;
        /*overflow: hidden;*/
    }

    .header-wrapper {
        display: inline-block;
        /*min-width: 300px;*/
    }

    .header-navbar {
        margin-top: 0;
        margin-bottom: 0;
    }

    .header-left {
        width: 60%;
    }

    .header-toggle-btn {
        /*width: 40px;*/
        display: block;
        /*float: left;*/
    }

        .header-toggle-btn button {
            padding-left: 0 !important;
            margin-top: -8px !important;
            margin-right: -5px !important;
            font-size: 40px !important;
        }

    .logo {
        width: 72%;
    }

    #slidemenu {
        left: -100%;
        height: 100% !important;
        margin-top: 0;
        position: fixed;
        z-index: 9999;
        border-radius: 0;
        top: 0;
        bottom: 0;
    }

        #slidemenu > ul {
            overflow-y: scroll;
            height: 100%;
            position: relative;
            padding-bottom: 200px;
        }

    /*#slidemenu.slide-active {
            display: block;
            left: 0;
            margin-top: 0;
        }*/

    #slide-nav .navbar.slide-active {
        position: absolute;
        width: 80%;
        top: -1px;
        z-index: 1000;
    }

    #slide-nav #slidemenu.slide-active {
        /*display: block;*/
    }

    #slide-nav #slidemenu {
        /*left: -100%;
        width: 80%;*/
        position: absolute;
        padding-left: 0;
        z-index: 2;
        top: 0;
        margin: 0;
        height: 100%;
    }

    #slidemenu ul li.active:after {
        content: "";
        width: 0;
        height: 0;
        float: none;
        top: 0;
        margin-top: 0;
        margin-right: 0;
        border-top: none;
        border-bottom: none;
        border-left: none;
        display: none;
    }

    #slidemenu ul li.active:hover:after {
        border-left-color: transparent;
    }

    #slidemenu ul li.logout {
        display: block;
    }

    .logo {
        float: left;
    }

        .logo a {
            margin-left: 0 !important;
        }

        .logo img {
            margin-top: 3px;
            height: 50px;
            width: 164px;
        }


    .navbar.navbar-fixed-top.slide-active {
        position: relative;
        top: 0;
    }

    #slide-nav #navbar-height-col {
        position: fixed;
        top: 0;
        height: 100%;
        width: 80%;
        left: -80%;
        background: #002352;
    }



    /***************************/
    /*  MAIN CONTENT    */
    /***************************/

    .main-content-wrapper {
        margin-left: 0;
        position: relative;
    }

    .main-content .container {
        display: block;
        overflow: hidden;
    }

    /*.top-container, .navbar-fixed-top {
        z-index: 9999;
    }*/

    /***************************/
    /*  PANEL */
    /***************************/

    #main-panel .panel .box-icons {
        width: auto;
    }

    #main-panel, #main-sidebar {
        /*padding-left: 0;*/
        margin-left: 0;
        width: 100%;
        margin-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #slidemenu {
        left: -250px;
        /*display: none;*/
        height: 100%;
    }


    /****************************************************/
    /* Account Info*/
    /****************************************************/


    .account-top-info .col-xs-8, .account-top-info .col-xs-4 {
        width: 100%;
        margin-bottom: 10px;
    }

    .col-xs-6 { /*.account-top-info */
        width: 100%;
        margin-bottom: 10px;
    }

    .row.row-nrp .col-xs-6 {
        width: auto !important;
    }

    .content-nav-header {
        margin-left: -15px;
        margin-right: -15px;
    }

    .account-top-info .label_amountdue span.label_amount {
        white-space: nowrap !important;
    }

    .current-services-box {
        margin-bottom: 15px;
        margin-top: -10px;
    }

    .content-nav-header .app-header {
        /*padding-left: 0;
            padding-right: 0;*/
    }

    #slider, .slider {
        display: block;
    }

    #slidernew {
        display: block;
        left: 0;
        right: 0;
        /*min-width: auto !important;*/
    }

        #slidernew a.control_next {
            display: block;
            background: #77BC1F;
            color: #ffffff;
            padding-left: 0;
            width: auto;
            z-index: 1000;
        }

            #slidernew a.control_next .icon {
                padding-right: 12px;
            }

        #slidernew a.control_prev {
            display: block;
            background: #77BC1F;
            color: #ffffff;
            width: auto;
            padding-right: 0;
        }

            #slidernew a.control_prev .icon {
                padding-left: 12px;
            }

        #slidernew ul {
            text-align: center;
            width: 100%;
        }

            #slidernew ul li {
                display: inline-block;
                width: 150px !important;
            }

                #slidernew ul li.prev {
                    left: 0;
                    position: absolute;
                    text-align: right;
                }

                    #slidernew ul li.prev span {
                        padding-right: 20px;
                    }

                #slidernew ul li.next {
                    float: right;
                    right: 0;
                    margin-right: 0;
                    position: absolute;
                    text-align: left;
                }

                #slidernew ul li.active {
                    float: none;
                    /*width: 50%;*/
                    text-align: center;
                }

        #slidernew .slider-content {
            text-align: center;
            vertical-align: middle;
            margin-top: 7px;
        }

            #slidernew .slider-content div {
                display: none;
                /*float: left;*/
                white-space: nowrap;
            }

                #slidernew .slider-content div a {
                    color: #fff;
                }

                #slidernew .slider-content div.active {
                    /*float: left;*/
                    width: auto;
                    display: inline-block;
                    position: relative;
                    text-align: center;
                    margin: 0 auto;
                    min-width: 70px;
                }

                    #slidernew .slider-content div.active a {
                        color: #104d9f;
                        font-weight: 600;
                    }

                #slidernew .slider-content div.prev {
                    /*width: 33%;*/
                    float: left;
                    left: 0;
                    position: absolute;
                    /*text-align: right;*/
                    display: block;
                    /*background: url(../img/left-gd.png) center center;*/
                    background: -webkit-linear-gradient(left, #FFFFFF, #BEBEBE);
                    background: linear-gradient(left, #FFFFFF, #BEBEBE);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    min-width: 70px;
                }

                #slidernew .slider-content div.next {
                    float: right;
                    right: 0;
                    position: absolute;
                    display: block;
                    /*background: url(../img/right-gd.png) center center;*/
                    background: -webkit-linear-gradient(left, #BEBEBE 0%,#ffffff 100%);
                    background: linear-gradient(left, #BEBEBE 0%,#ffffff 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    min-width: 70px;
                    margin-top: -19px;
                }

        #slidernew a {
            text-decoration: none;
        }


    .billrow span:nth-of-type(2), .billheading span:nth-of-type(2) {
        text-align: center;
        margin-left: 25px;
    }

    .paymentheading span.paydate {
        width: 23.5% !important;
    }

    .billing-activity .billrow span {
        width: 23%;
    }

    .resp-esiid {
        margin-left: -30px;
    }

    .resp-link {
        font-size: 9px;
    }

    .profileheight .editable-buttons, .profileheight .editable-cancel {
        margin-left: 1px !important;
    }

    .profileheight .editable-input input {
        padding-right: 0px !important;
        width: 137px;
    }
    /**

    /*******************my offer*************************/
    .offer_content {
        margin: 0;
    }

    .offer-sec {
        min-width: 100% !important;
    }

        .offer-sec label {
            display: table-caption;
        }

    .sec-p {
        text-align: justify;
    }

    .my-offer .col-xs-4, .my-offer .col-xs-8 {
        width: 100% !important;
    }

    .myoffer_allied {
        width: 50%;
        height: 71px;
        display: none;
    }

    .myoffer img {
        width: auto;
    }

    .terms ul li span {
        width: 84%;
    }


    /*******************usage history*************************/
    .uh-btn button {
        width: 50%;
    }

        .uh-btn button.third {
            border-radius: 5px 0px 0px 5px !important;
        }

        .uh-btn button.second {
            border-radius: 0px 5px 5px 0px !important;
        }

    /****************************************************/
    /* Footer */
    /****************************************************/

    .footer {
        margin-top: 10px;
    }

        .footer ul {
            padding-left: 0;
            margin-top: 5px;
            margin-bottom: 15px;
        }

            .footer ul li {
                width: 100%;
                display: block;
                border: none;
            }

                .footer ul li a {
                    text-align: center;
                    display: inline-block;
                    float: none;
                }

            .footer ul.copyright li {
                border: none;
            }

    .select-usage {
        margin-bottom: 20px;
    }

    .usage-select .col-xs-3 {
        width: 93%;
    }

    .usage-select .col-xs-2 {
        width: 30%;
    }

    .usage-select .width-half {
        width: 45% !important;
    }
    /****************************************************/
    /* Heights */
    /****************************************************/

    #main-panel, #main-sidebar, #main-panel .row:last-child .panel {
        height: auto !important;
    }

    .monthly-usage, .recent-activity, .billing-activity, .payment-activity {
        height: auto !important;
    }

    .estimatedbill, .recentactivity, .billingactivity, .paymentactivity, .managewidth {
        width: 100%;
    }

    .auto-pay .col-xs-3, .auto-pay .col-xs-4, .auto-pay .col-xs-2, .auto-pay .col-xs-8, #main-panel .col-xs-6,
    .profile-info .col-xs-3,
    .profile-info .col-xs-9 {
        width: 100% !important;
    }

    .auto-pay .payment-options .col-xs-5 {
        width: 100%;
    }

    .auto-pay .toggle-btn-grp {
        margin-top: 10px;
        text-align: center;
    }

    /* LOGIN */



    .sign-wrapper, .sign-container, .accountsel-wrapper {
        width: auto !important;
    }

        .accountsel-wrapper .account-info-select {
            padding-left: 5px;
            padding-right: 5px;
        }

    .new-account-buttons {
        float: none;
        text-align: center;
        /*padding-top:10px;*/
    }

    label.label-new {
        line-height: 18px;
    }

    /* Current Services */
    .current-services .col-xs-8 {
        width: 100%;
    }

    .current-services ul {
        margin-left: 0;
    }

    #A1 {
        padding-left: 0;
        padding-right: 0;
    }

    #notif-messages {
        padding-left: 7px;
    }

    .renew-boxed .col-xs-5, .renew-boxed .col-xs-1 {
        width: 100%;
    }

    .renew-boxed button {
        width: 94%;
    }
    /* Account Selection */
    .account-list .col-xs-6, .accountsel-wrapper .col-xs-6 {
        width: 48%;
        margin-bottom: 0;
    }

    /*.account-info h5 {
        text-align: right;
    }*/

    /*.logout-btn-icon {
        display: inline-block;
    }*/

    /*.logout-btn {
        display: none;
    }*/

    #A1 {
        padding-top: 6px;
    }

        #A1.btn-icon > .badge {
            top: 2px;
            right: -11px;
        }

    .accountdiv .row .col-xs-6 {
        text-align: left !important;
    }

    .act-options ul {
        padding-left: 0;
    }

    .dataTables_length {
        margin-top: 10px;
    }

    .accountsel-wrapper .account-info-select {
        width: 60px;
        font-size: 14px;
    }

    .accountsel-wrapper .account-list .account-list-item:hover {
        margin-left: 0;
        margin-right: 0;
        /*cursor: pointer;*/
    }

    /* Dropdown menu */
    .dropdown-menu.dropdown-extend {
        min-width: 243px;
        max-width: 243px;
    }

    .dropdown-menu.pull-right {
        right: -17px; /*-28px*/
    }

    .dropdown-menu.dropdown-extend.pull-right:before {
        right: 18px; /*38px*/
    }

    .accountsel-wrapper .account-info-content {
        float: none !important;
        padding-top: 10px;
    }

    .accountsel-wrapper .account-info-select {
        width: 100%;
        height: 46px;
    }

        .accountsel-wrapper .account-info-select span {
            top: 27%;
        }

    /*.accountsel-wrapper .account-info, .accountsel-wrapper .account-list-item {
        margin-bottom: 70px;
    }*/


    /**signup page**/

    .form-signup .form-group .col-xs-4, .form-signup .form-group .col-xs-7, .sign-up .form-control {
        width: 100%;
    }

    .sign-up {
        height: 1030px;
    }

    .accountsel-wrapper .col-xs-9, .accountsel-wrapper .col-xs-3 {
        width: 100%;
    }

    .accountsel-wrapper .col-xs-3 {
        text-align: center;
    }

    .nav-bar-top-menu {
        margin-right: 5px;
    }

        /*.nav-bar-top-menu > li:nth-child(2),*/
        .nav-bar-top-menu > li:nth-child(1) {
            display: none;
        }

    #slidemenu > ul > li.active > a > span.selected {
        display: none;
    }

    .account-top-info span.primary {
        margin-left: 0;
        margin-top: 5px;
        display: block;
    }

    .account-top-info .acc-info-opt a,
    .account-top-info span.or {
        display: block;
        margin-top: 5px;
        white-space: nowrap;
    }

    .account-top-info .pay-info {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 35px;
    }

    .account-top-info .editable-input input {
        padding-right: 0px !important;
    }

    .account-top-info .editable-buttons .editable-cancel {
        margin-left: 4px !important;
    }

    /*.account-top-info .pay-button {
        float: left;
    }*/

    #recentbox .recentbox-r {
        margin-top: 10px;
    }

    .blockMsg {
        left: 42% !important;
    }

    /*Customer Support*/
    .Support-faq-box, .Support-Outage-box {
        width: 93% !important;
        height: auto;
        margin-right: 10px !important;
    }

        .Support-faq-box .col-xs-7, .Support-faq-box .col-xs-3, .Support-faq-box .col-xs-5 {
            width: 94% !important;
        }

        .Support-Outage-box .col-xs-7, .Support-Outage-box .col-xs-3, .Support-Outage-box .col-xs-5 {
            width: 94% !important;
        }

        .Support-faq-box .panel-body {
            margin-right: 10px !important;
        }

    .Support-Outage-box {
        margin-top: 10px;
    }

    .Support-faq-box a[data-theme="f"] {
        margin-left: 10px;
    }

    .transfermyservice #Div2 {
        margin-left: 28px;
        width: 120px;
    }

    .transfermyservice .ta-center {
        width: 100%;
        margin-bottom: 5px;
    }

    .transfermyservice div[ng-show="isAddressSelected"] .col-xs-3, .transfermyservice div[ng-show="isAddressSelected"] .col-xs-7 {
        width: 100% !important;
    }

    .transfermyservice #btnContinue {
        margin-left: 15px;
    }

    .terms input[type="checkbox"] {
        width: 5% !important;
        margin-right: 7px;
    }

    .resp-transStopDate {
        width: 100%;
    }

    #main-sidebar .panel:first-child {
        margin-top: 25px;
    }


    #main-sidebar .panel:nth-of-type(2) {
        margin-top: 25px;
    }

    .usage-date {
        width: 110px !important;
        display: inline-block !important;
    }

    .renew-boxed {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .TMS_Cuurrent-box .col-xs-2 {
        width: 100%;
        margin-left: 7px;
    }

    .popover {
        left: -14px !important;
    }

    .usage-select .col-xs-4 {
        width: 100% !important;
    }

    .usage-select .ml-15 label {
        margin-left: -15px;
        margin-right: 15px;
    }
}

@media only screen and (max-width : 380px) {
    .billrow {
        line-height: 22px;
    }
}

@media only screen and (max-width : 320px) {
    #recentbox .recentbox-l,
    #recentbox .recentbox-r {
        width: 42%;
    }

    #recentbox .recentbox-r {
        margin-right: 5px;
    }

    #recentbox .left,
    #recentbox .right {
        width: 49% !important;
    }

    .logo a {
        /*margin-left: 20px;*/
    }
    /*#recentbox .list-group-item {
        padding: 3px 0 3px 12px;
    }*/
}

@media only screen and (min-width : 480px) and (max-width : 1023px) {
    .logo {
        margin-top: -7px;
    }
}