.app_nav li a {

}

header{
    background: #f4f6f8;
    min-height:10rem;

}

.display-flex{
    display: flex;
}
.app-section{
    min-height: auto;
    padding-top: inherit;
    border: 0px;
    text-align: initial;
}

.app-section article{

}

#loading {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: #fff;
    z-index: 99;
}

#loading-image {
    z-index: 100;
    height: 100px;
}

.pull-left {
    float: left !important;
}
.pull-right {
    float: right !important;
}



.Accordions {
    display: block;

    margin: auto;
}

.Accordion_item {
    width: 100%;
    height: auto;
    margin: 5px 0;
}

.Accordion_item .title_tab {
    width: 100%;
    background-color: #51adf6;
    color: #FCFCFC;
    padding: 7px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease-in;
    border-radius: 4px;
}
.Accordion_item .title_tab .title {
    font-size: 1.6rem;
    letter-spacing: 1px;
    position: relative;
    margin-bottom: 0px;
}
.Accordion_item .title_tab .title .icon {
    position: absolute;
    right: 1%;
    top: calc(50% - 8px);
    width: 16px;
    height: 16px;
    background-color: transparent;
    transform: rotate(-90deg);
    transition: transform 0.3s ease-in;
}
.Accordion_item .title_tab .title .icon:before, .Accordion_item .title_tab .title .icon:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 2px;
    background-color: #FCFCFC;
}
.Accordion_item .title_tab .title .icon:before {
    top: 0;
    left: 2px;
    transform: rotate(-45deg);
}
.Accordion_item .title_tab .title .icon:after {
    top: 0;
    right: 2px;
    transform: rotate(45deg);
}

.inner_content {
    width: 100%;
    height: auto;
    display: none;
    overflow: hidden;
}
.inner_content p {
    width: 98%;
    margin: auto;
    padding: 18px 15px;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 1px;
    opacity: 0;
    transform: translate3d(0px, 60px, 0px);
    transition: transform 0.6s cubic-bezier(0, 0.99, 0.44, 1.01), opacity 0.8s 0.1s cubic-bezier(0, 0.99, 0.44, 1.01);
}

/* ================================= */
.Accordion_item .title_tab.active {
    background-color: #2196F3;
    transition: background-color 0.3s ease-in;
}
.Accordion_item .title_tab.active .title .icon {
    transform: rotate(0deg);
    transition: transform 0.3s ease-in;
}
.Accordion_item .title_tab:hover {
    background-color: #2196F3;
    transition: background-color 0.3s ease-in;
}
.Accordion_item .inner_content p.show {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    transition: opacity 0.8s cubic-bezier(0, 0.99, 0.44, 1.01), transform 0.6s 0.1s cubic-bezier(0, 0.99, 0.44, 1.01);
}

/* ================================= */
.inner_content p span {
    font-size: 14px;
    line-height: 30px;
}
.inner_content p b {
    color: #F44336;
    font-size: 18px;
}

.d-none{
    display:none
}

button.active_page{
    background: #B4E1FA !important;
}

/***********  UTILITY CSS ***************/
.full-width {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.max-full-width {
    max-width: 100%;
    box-sizing: border-box;
}
.align-center {
    text-align: center;
}
.align-left {
    text-align: left;
}
.float-left {
    float: left;
}
.align-right {
    text-align: right;
}
.float-right {
    float: right;
}
.highlight-warning {
    background: #FCF1CD;
    color: #ED6347;
}
.blue {
    color: #007ACE;
}
.green {
    color: #50B83C;
}
.yellow {
    color: #EEC200;
}
.red {
    color: #ED6347;
}
.grey {
    color: #DFE4E8;
}
.orange {
    color: #F49342;
}
.emphasis {
    font-weight: 600;
    color: hsl(0,0%,10%);
}
.subdued {
    font-weight: normal;
    color: hsl(0,0%,44%);
}
.hide-scrollbars {

    ::-webkit-scrollbar {
        display: none !important;
        width: 10px !important;
        height: 0 !important;
    }
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0);
    }
}
.overflow-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/*********** END OF UTILITY CSS ***************/

span.error{
    color:#bf0711;
    float: left;
    margin-top: 0.4rem;
}


form div.row label{
    margin-bottom: 0.4rem;
}
/*
.action-container {
    position: fixed;
    left: 0;
    top: 50px;
    text-align: center;
}*/


/* The navigation bar */
.app_nav {
    overflow: hidden;
    background: inherit; 
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    z-index: 999;
}


/* Main content */
#main {

}


.tbl_row{
    display:table-row;
}

.hide{visibility: hidden}
.show{visibility: visible}

.loading{

    text-align: center;
    margin:0 auto;
    float: left;
    width: 100%
}



table.tab_sub_summary tr td:first-child {
    width: 50%;
}

table.tab_sub_summary th {
    text-transform: none;
}

table.tab_sub_summary tbody tr:nth-child(odd) {
    background: #fff;
}


table.tab_sub_summary tr td:last-child {
    color:#000;

}
table.tab_sub_summary tr td:first-child {
    color:#000;

}
table.dataTable thead th {
    border-bottom: .1rem solid #d3dbe2 !important;
}

table.dataTable.no-footer {
    /* border-bottom: .1rem solid #d3dbe2 !important; */
    border-bottom: none !important;
}


.dataTables_paginate a.paginate_button {
    background: -webkit-linear-gradient(top, #fff, #f9fafb);
    border:1px solid #c4cdd5;
    box-shadow: 0 1px 0 0 rgb(22 29 37 / 5%);
}

.dataTables_paginate a.paginate_button.current {
    background:#B4E1FA !important;
}

.dataTables_paginate a.paginate_button:hover {
    background: -webkit-linear-gradient(top, #f9fafb, #f4f6f8);
    background: linear-gradient(180deg, #f9fafb, #f4f6f8);
    border-color:#c4cdd5; 
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: -webkit-linear-gradient(top, #6371c7, #5563c1) !important;
    background: linear-gradient(180deg, #6371c7, #5563c1) !important;
    border:.1rem solid #3f4eae;
    box-shadow: inset 0 1px 0 0 #6774c8, 0 1px 0 0 rgb(22 29 37 / 5%), 0 0 0 0 transparent;
}

.dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    float: none !important;
}


.dataTables_paginate span a.paginate_button {
    display: none !important;
}


.sub_payments td span.order_type {
    font-size: 10px;
}

#subStatusMessage {
    display: none;
}

.sub_status_change button {
    display: none;
}


.shipping_info_update {
    display: none;
    clear:both;
}

.shipping_info_update .row {
    margin-bottom: 1rem;
}
.shipping_info_update input.address1 {
    margin-bottom: 1rem;
}
.shipping_info_update input.address2 {
    margin-bottom: 1rem;
}



/********* MENU ***********/

/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */
/* Style the navigation menu */
.topnav {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    display: list-item;
    top: 0px;
    right: 0px;
    width: 100%;
    z-index: 99;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
    display: none;
}

/* Style navigation menu links */
.topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Style the active link (or home/logo) */
.topnav .active {
    background-color: #04AA6D;
    color: white;
}

/****** eod menu ***********/



/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons on small devices, paste the mobile query code up in the buttons section and style it there.
*/
/* Larger than mobile */
/* Larger than phablet (also point when grid becomes active) */
/* Larger than tablet */
/* Larger than desktop */
/* Larger than Desktop HD */


@media only screen and (min-device-width : 320px) {
    h2.page_title {
        padding-top: 10px;
        padding-left: 15px;
    }
    .alert{
        margin: 0px auto;
    }
    section{
        padding: 0px 15px;
    }
}

.accu_nav_back a { padding-left:15px;  }
.accu_nav_back button:after { left:15px; }
.accu_nav_back button { padding-left:30px; }