/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {
    .container {
        padding-right: 0px;
        padding-left: 0px;
    }

    .images img {
        display: none;
    }

    .logoHeaderImage {
        width: 250px;
    }

    #headImage {
        width: 80%;
        margin-top: 5px;
    }

    #HeadLabel {
        font-size: 60%;
    }

    .logoHeaderImage h1 {
        text-align: left;
    }

    .goog-te-gadget img {
        display: none;
    }

    .loginDisplay {
        padding-top: 1px;
    }

    .right-header-content {
        margin-top: 10px;
    }

    .header h1 {
        padding-left: 10px;
    }

    .goog-te-gadget span {
        font-size: 11px;
    }

    #MainContent_UpdatePanel1 {
        padding: 0px;
    }

    .login-2 {
        margin-left: 0px;
    }
    /*NAVBAR*/
    div.menu {
        padding: 0;
    }

        div.menu ul li a {
            text-align: left;
        }

        div.menu > ul > li {
            width: 100%;
        }

    .navbar-nav {
        display: unset;
    }

    .new-user-box {
        display: none;
    }

    .breadcrumb {
        display: none;
    }

    .navbar .menu ul[style] {
        position: unset !important;
    }

    div.menu ul {
        width: 100% !important;
    }

    .level2 li a.level2 {
        padding-left: 40px;
        background-color: #3c4f77;
        border: none;
    }

    .level3 li a.level3 {
        padding-left: 70px;
        background-color: #445b88;
        border: none;
    }

    div.menu {
        margin-left: 0px;
    }

    /*HEADER (after login)*/
    .loginDisplay > span, .loginDisplay > br {
        display: none;
    }

    /*AJAX TAB -> convert to dropdown list*/
    .ajax__tab_outer, .ajax__tab_inner, a.ajax__tab_tab {
        width: 100%;
    }

        a.ajax__tab_tab h3 {
            text-align: left;
            padding-left: 10px;
        }

    div.ajax__tab_header {
        position: absolute;
        z-index: 99;
        right: 20px;
        left: 20px;
        background: rgb(230, 233, 255);
        border: 1px solid rgba(88, 106, 172, 0.19);
        /* border-bottom: none; */
        border-radius: 2px;
    }

    div.ajax__tab_body {
        padding-top: 35px;
    }

    .MyTabStyle .ajax__tab_body {
        background-color: unset;
        background: unset;
        border: unset;
    }

    .MyTabStyle .ajax__tab_header .ajax__tab_outer {
        border: unset;
    }

    a.ajax__tab_tab {
        display: flex !important;
        justify-content: space-between;
    }

    i.fa-caret-down {
        font-size: 20px;
        color: #334466;
        margin-right: 3px;
    }

    div.ajax__tab_header {
        max-width: 280px;
    }

    div.ajax__tab_body div {
        margin-top: 3px;
    }

    div.ajax__tab_container {
        margin-top: 2px;
    }

    a.ajax__tab_tab {
        padding: 3px 10px 2px 0px;
    }

    /*LOGIN LOADING*/
    #processMessage {
        top: 20%;
    }

    #MainContent_Login1_RememberMe {
        margin-top: 0px;
    }

    /*REGISTER SCREEN RESPONSIVE UI*/
    .register-label-width {
        width: 105px;
    }

    div.register-content > table:first-child {
        min-width: unset;
    }

    .register-guide {
        padding-top: 0px;
    }

    .sm-lg-size {
        width: 100%;
    }
    /*PAY SCREEN */
    .payment-summary-btn {
        white-space: normal; 
        max-width:235px; 
    }

    .print-report-table {
        max-height: 85%;
    }

    #MainContent_reportsMPE_foregroundElement {
        max-height: 30%;
    }

    .reboot-label label {
        display: inline;
        margin-bottom: 0;
    }
}

@media (min-width: 620px) {
    .container {
        max-width: unset;
    }

    .images img {
        max-height: 126px;
        display: unset;
    }

    #headImage {
        width: 100%;
        margin-top: 4px;
    }

    .logoHeaderImage h1 {
        text-align: left;
    }

    .logoHeaderImage img {
        width: 100%;
    }

    .logoHeaderImage {
        width: 270px;
    }

    #HeadLabel {
        font-size: 85%;
    }

    .logoHeaderImage h1 {
        text-align: center;
    }

    .goog-te-gadget img {
        display: unset;
    }

    .loginDisplay {
        padding-top: 4px;
    }

    .header h1 {
        padding-left: 10px;
    }

    .goog-te-gadget span {
        font-size: 100%;
    }

    .new-user-box {
        width: 100px;
        display: unset;
    }

    .breadcrumb {
        display: block;
    }

    .reboot-label label {
        display: inline-block;
        margin-bottom: .5rem;
    }
    .table-td-padding td {
        padding-bottom: 0px;
    }
}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: unset;
    }

    /*PAY UI -> CREDIT CARD INFO*/
    .td-size-70p {
        width: 70%;
    }

    .table-td-padding td {
        padding-bottom: 5px !important;
    }
}

/* Medium devices (tablets, 768px and up). Navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .images img {
        max-height: 150px;
    }

    .container {
        padding-right: 0px;
        padding-left: 0px;
    }

    #headImage {
        width: 100%;
    }

    .logoHeaderImage h1 {
        text-align: center;
    }

    .logoHeaderImage {
        width: 356px;
    }

    #HeadLabel {
        font-size: 100%;
    }

    /*LOGIN */
    .loginDisplay {
        padding: 10px 25px 5px 0px;
    }

    .login-2 {
        margin-left: 10px;
    }

    /*This needs to be corrected (rid of this?) - it only works when an updatepanel is present on the page*/
    #MainContent_UpdatePanel1 {
        padding: 0px 40px 0px 40px;
    }

    /*NAVBAR*/
    div.menu > ul > li {
        width: unset;
        width:auto;
    }

    div.menu {
        margin-left: 25px;
    }

    .navbar .menu ul li ul[style] {
        position: absolute !important;
    }

    div.menu ul {
        width: auto !important;
    }

    .level2 li a.level2 {
        padding-left: 4px;
        border: 1px solid #4e667d;
    }

    .level3 li a.level3 {
        padding-left: 4px;
        border: 1px solid #4e667d;
    }

    /*HEADER (after login)*/
    .loginDisplay > span, .loginDisplay > br {
        display: unset;
    }

    /*AJAX TAB*/
    .ajax__tab_outer, .ajax__tab_inner, a.ajax__tab_tab {
        width: unset;
    }

        a.ajax__tab_tab h3 {
            text-align: center;
            padding-left: unset;
        }

    div.ajax__tab_header {
        position: unset;
        z-index: auto;
        /* right: initial; */
        /* left: 20px; */
        background: unset;
        border: unset;
        /* border-bottom: none; */
        border-radius: unset;
    }

    div.ajax__tab_body {
        padding-top: unset;
    }

    .MyTabStyle .ajax__tab_header .ajax__tab_outer {
        border-color: #222;
        border: solid 1px #c6c6c6;
    }

    .MyTabStyle .ajax__tab_body {
        background-color: #fff;
        background: #f1f1f1;
        border: solid 2px #ffffff;
    }

    .MyTabStyle .ajax__tab_active .ajax__tab_outer {
        border-color: #ffffff;
    }

    a.ajax__tab_tab {
        display: inline-block;
    }

    div.ajax__tab_header {
        max-width: 100%;
    }

    div.ajax__tab_body div {
        margin-top: 0px;
    }

    /*LOGIN LOADING*/
    #processMessage {
        top: 20%;
    }

    #MainContent_Login1_RememberMe {
        margin-top: 4px;
    }

    /*REGISTER SCREEN RESPONSIVE UI*/
    .register-label-width {
        width: 95px;
    }

    div.register-content > table:first-child {
        min-width: 375px;
    }

    .register-guide {
        padding-top: 10px;
    }

    /*PAY SCREEN*/
    /*PAY SCREEN */
    .payment-summary-btn {
        white-space: normal;
        max-width: unset;
    }

    .print-report-table {
        max-height: 90%;
    }

    #MainContent_reportsMPE_foregroundElement {
        max-height: 80%;
    }

    .breadcrumb {
        margin-left: 20px;
        margin-right: 20px;
    }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .images img {
        max-height: 170px;
    }

    #HeadLabel {
        font-size: 115%;
    }

    .logoHeaderImage {
        margin-top: 10px;
    }
    .sm-lg-size {
        width: 50%;
    }

}

/* Extra large devices (large desktops, 1200px and up) */
/*@media (min-width: 1200px) {

}*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
  Custom, extra small devices 
*/
@media (max-width: 320px) {
    .container {
        padding-right: 0px;
        padding-left: 0px;
    }

    .images img {
        display: none;
    }

    #HeadLabel {
        font-size: 40%;
    }

    .logoHeaderImage {
        width: 160px;
    }

    #headImage {
        width: 80%;
        margin-top: 8px;
    }

    #HeadLabel {
        font-size: 50%;
        font-weight: 300;
    }

    .logoHeaderImage h1 {
        text-align: left;
    }

    .goog-te-gadget img {
        display: none;
    }

    .loginDisplay {
        padding-top: 0px;
    }

    .right-header-content {
        margin-top: 10px;
    }

    .header h1 {
        padding-left: 3px;
        padding-top: 0px;
    }

    .goog-te-gadget span {
        font-size: 10px;
    }

    .logoHeaderImage {
        max-width: 150px;
    }

    .loginDisplay a {
        font-size: 13px;
    }

    #MainContent_UpdatePanel1 {
        padding: 0px;
    }

    .login-2 {
        margin-left: 0px;
    }

    /*NAVBAR*/
    div.menu {
        padding: 0;
    }

     div.menu > ul > li {
        width: 100%;
     }

    .new-user-box {
        display: none;
    }

    .breadcrumb {
        display: none;
    }

    .navbar .menu ul[style] {
        position: unset !important;
    }

    .level2 li a.level2 {
        padding-left: 40px;
        background-color: #3c4f77;
        border: none;
    }

    .level3 li a.level3 {
        padding-left: 70px;
        background-color: #445b88;
        border: none;
    }

    div.menu {
        margin-left: 0px;
    }

    /*HEADER (after login)*/
    .loginDisplay > span, .loginDisplay > br {
        display: none;
    }

    /*AJAX TAB*/
    .ajax__tab_outer, .ajax__tab_inner, a.ajax__tab_tab {
        width: 100%;
    }

        a.ajax__tab_tab h3 {
            text-align: left;
            padding-left: 10px;
        }

    div.ajax__tab_header {
        max-width: 100%;
    }

    div.ajax__tab_header {
        position: absolute;
        z-index: 99;
        right: 20px;
        left: 20px;
        background: rgb(230, 233, 255);
        border: 1px solid rgba(88, 106, 172, 0.19);
        /* border-bottom: none; */
        border-radius: 2px;
    }

    div.ajax__tab_body {
        padding-top: 35px;
    }

    .MyTabStyle .ajax__tab_body {
        background-color: unset;
        background: unset;
        border: unset;
    }

    .MyTabStyle .ajax__tab_header .ajax__tab_outer {
        border: unset;
    }

    a.ajax__tab_tab {
        display: flex !important;
        justify-content: space-between;
    }

    i.fa-caret-down {
        font-size: 20px;
        color: #334466;
        margin-right: 3px;
    }

    div.ajax__tab_header {
        max-width: 100%;
    }

    div.ajax__tab_body div {
        margin-top: 2px;
    }

    div.ajax__tab_container {
        margin-top: 2px;
    }

    a.ajax__tab_tab {
        padding: 3px 10px 2px 0px;
    }

    /*LOGIN LOADING*/
    #processMessage {
        top: 20%;
    }

    #MainContent_Login1_RememberMe {
        margin-top: 0px;
    }

    /*REGISTER SCREEN RESPONSIVE UI*/
    .register-label-width {
        width: 105px;
    }

    div.register-content > table:first-child {
        min-width: unset;
    }

    .register-guide {
        padding-top: 0px;
    }

    .sm-lg-size {
        width: 100%;
    }
    .payment-summary-btn {
        white-space: normal;
        max-width: 220px;
    }

    .print-report-table {
        max-height: 80%;
    }

    #MainContent_reportsMPE_foregroundElement {
        max-height: 30%;
    }

    .reboot-label label {
        display: inline;
        margin-bottom: 0;
    }
}

@media (max-width: 390px) {
    .flex-box-end {
        justify-content: flex-end !important;
    }
}