@media (width: 1024px){
  .container {padding-left:2px;padding-right:2px;}
    .top-header .container {padding-left:10px;}
    h1 {margin-left:8px;}
    .status-bar .autosave {right:10px;}
    footer .container {padding-left:10px;padding-right:10px;}
    #rightCol section {margin-right:4px;}
    #leftCol nav {margin-left:8px;}
    .reviews #rightCol, .los #rightCol {padding-right:10px;}
}

@media (max-width: 1023px){
  .container {max-width:100%;}
/*}
@media (max-width: 900px) {*/
    .w1000 {display:none!important}
    .w900 {display:block}
    .logo {
        padding-right: 32px;
        background-position: center top ;
    }
    .top-header .container {text-align: center}
    .top-header .container .logo {margin-left:auto;margin-right:auto;}
    .top-header p.w900 {left:15px;text-align: left}
    .top-header p.w900 a span {margin-right:-16px;}
    .submenu {left:0}
    .sub-header-line {padding-right:24px;}

    .popwin .alert-bg {padding:6px 30px;}
    .popwin .alert-bg span#inerror {display:inline}

    .status-bar .error-status {padding-left:15px;}

    #subHeader p {position: static;top: 15px;right: auto;margin: 0;padding: 0;overflow: hidden;margin-bottom: 15px;}
    #subHeader p span.navy,#subHeader p a {margin-left:0;margin-right:30px;}
    .body.container {min-height:500px;padding:15px!important}
    .reference .body.container,
    .error-page .body.container{border:0;/*padding:0 30px;*/}
    .sidenav {margin-left:15px;margin-right:15px;margin-bottom:30px;}
    .reference .sidenav li a {padding-left:0!important}
    .reference #subHeader h1 {padding-left:45px;}
    #searchResult.reference #subHeader h1 {padding-left:0;}
    #searchResult.reference #subHeader a.back-link {top:6px;}
    .reference #subHeader .back-link-1 {height:auto;padding-top:0;text-align: left}
    .reference #subHeader h1 a {position:absolute; left: 0;top:0}
    .reference a.close {position:absolute;right:0;top:0}


    .inline {display:block!important;margin-left:0;}
    .next-label {margin-left:0!important;}

    footer {height:auto;padding:15px;line-height: 16px;text-align: center}
    footer span {display: block}
    footer nav,footer .nav  {position:static;padding:12px 15px 0 15px;line-height: 16px;}

    .status-bar .container .ico-menu {position:absolute;left:31px;top:calc(50% - 12px);}
    .status-bar .container .ico-menu:before {color:var(--white-text);}
    .status-bar .container .ico-menu.open:before {}
    /* updated for ANR-3
    .status-bar .container i {display:none}
    */
    body:not(.with-error) .status-bar span.autosave,
    body:not(.with-error) .status-bar span.status-msg
        {display:block!important; position: static;text-align: right;top:auto;right:auto;line-height: 20px;transform: none;padding-right:0;}
    body:not(.with-error) .status-bar span.status-msg:empty{display: none!important;}
    .sub-header {margin-top:30px;}
    section:first-child .sub-header{margin-top:0}

/*review tabs*/
    ul.tabs {position:relative;margin-bottom:0;padding-top:60px;}
    ul.tabs li {width:80px;}
    ul.tabs li a {white-space: pre-wrap;display:block;line-height:16px;text-align: left;padding-top:4px;padding-bottom:4px;}
    ul.tabs li.right-btns { /*myReviewList*/
        position:absolute;top:0!important;left:0!important;width:100%;text-align: left;padding-left:0;margin-left:0}
    ul.tabs li.right-btns  p {display:block;margin-bottom:0;line-height:1.5rem}

    /*review page*/
    .sub-menu-line {height:auto;line-height: 1.5rem;padding-top:10px;}
    .sub-menu-line span {display:block}
    .sub-menu-line .required-note {position: static;line-height: 1.5rem;height:auto;margin-bottom: 0;margin-top:20px}

    /*myReviewList, pubAppList*/
    .drop-menu-box {margin-bottom:30px;}
    .drop-menu-box  a.col {border:1px solid var(--med-gray-inactive-text);line-height:40px;padding-left:15px;padding-right:15px;display:block;position:relative}
    .drop-menu-box .sort-row .ico:last-child {position:absolute;right:0;top:6px}
    .drop-menu-box a b,.drop-menu-box a span {color:#333}

    #leftCol {position:absolute;left:0;display:none;background: var(--white-text);width:250px;overflow-y: auto}
    #leftCol li {height:auto;line-height: 20px;padding-top:12px;padding-bottom: 12px;}
    #leftCol li a {padding-left:38px;}

    #rightCol,
    #subHeader h1{width:100%}

    .fckContent, .textareaContent,
    .ckEditorSpan,
    .l-field        {
        width:calc(100% - 20px)!important;}

    /*change table.list format*/
    table.list, table.list thead, table.list tbody, table.list th, table.list td, table.list tr {display: block;}
    table.list thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    table.list tr { border-bottom: 1px dotted var(--med-gray-inactive-text); padding-bottom:15px;padding-top:15px;}
    table.list td {
        border: none;
        position: relative;
        padding-left: 40%;
        padding-top:6px;
        padding-bottom:0;
    }
    table.list td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 40%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 700;
        color:var(--navy);
    }

    table.list TH {display:none}

    input.btn {margin-left:0;margin-right:6px;}
    .flexbox.choice {margin-left:0;}

}
@media (max-width: 800px) {
    .btn-line.more-btns input.submit, .btn-line input.btn {
        display: block;
        margin-bottom: 12px;
        margin-left: auto;
        margin-right: auto !important;
        width: 250px;
        margin-top: 0
    }
}
    @media (max-width: 650px) {
    .logo, .field-1-2 {width:100%!important;}
    .btn-line {
        margin-top: 30px;
    }
    .helper .open-close {right:10px;}
    .helper .header {padding-right:50px;}
    .other-div TEXTAREA,.other-div INPUT[type=text] {width:98%}

    .pop-footer input.btn,
    .right-btns input.btn,
    .btn-line input.submit, .btn-line input.btn {
        display: block;
        margin-bottom: 12px;
        margin-left: auto;
        margin-right: auto !important;
        width: 250px;
        margin-top: 0
    }

    .right-btns input.btn {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .pop-footer {
        padding-top: 30px
    }
}

@media (max-width: 500px) {
    H1 {font-size: 1.5rem;}
    .logo {width:100%}

    .helper {max-height:9000px;}
.body.container {min-height:400px;}
    .field-1-2,
    .field-1-3 {width:100%!important  }
    .deadline-bar .date-info {float:none}
    .deadline-bar .submit-info {margin-top:15px;float:left}
    .deadline-bar .submit-info .label-value h5  {text-align: left;}
    /*
    .deadline-bar .date-info h2 span:not(.dispnone) {display:inline}
    */
    .deadline-bar .date-info h2{font-size: 14px;}

    .pop-footer,.top-btns.right-btns,
        .btn-line {text-align: center}
    .right-btns.action-btns  {margin-top:15px;}
    li.right-btns p {margin-top:-6px;}
    .flexbox {display:block}
    .flexbox .col {width:100%;padding-right:0}


    .pop-sub-header .right-action {position: static;text-align: center;margin:15px auto;right:auto;top:auto}
    .pop-sub-header .right-action .btn {width:250px;}

}
@media (max-width: 400px) {
    .autosave {padding-left:50px;}
    .autosave i {display:block;}
    #budget.narrow .body.container {min-width:400px;overflow-x: auto;}
    #budget.narrow #contentCol {min-width:230px;}
    #budget.narrow .periodCol {min-width:136px;}
}