/*
    Styling for 'My Account' 
    probably should shift masonry-layout.css into here as it is not a generic layout, but rather it targets the accounts page
*/

/***
    Streamlined Filter
***/
.account-table .streamlined-filter {
    clear: both;
    width: 100%;
}

.account-table .streamlined-filter .search-container {
    float: left;
    position: relative;
    width: 350px;
    background: white;
    padding: 5px 0;
    margin: 0 20px 10px 0;
}

.account-table .streamlined-filter .search-container input,
.account-table .streamlined-filter  select.type-filter {
    float: left;
}

.account-table .streamlined-filter .search-container input {
    border: none;
    background: none;
    box-shadow: none;
    width: 100%;
}
.account-table .streamlined-filter .search-container input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px white inset; /*Chrome Autocomplete background colour - Hack*/
}

.account-table .streamlined-filter .search-container button {
    float: right;
    border: none;
    width: 26px;
    height: 26px;
    background: none;
    background: url("./images/icons/search-icon.png") center center no-repeat;
    position: absolute;
    right: 3px;
    top: 7px;
}
.account-table .streamlined-filter .search-container button:hover {
    cursor: pointer;
}
.account-table .streamlined-filter .search-container button:focus {
    outline: none;
    background: url("./images/icons/search-icon-focused.png") center center no-repeat;
}

.account-table .streamlined-filter  select.type-filter {
    border: none;
    height: 36px;
}
.account-table .streamlined-filter select.type-filter:focus {
    outline: none;
}

/*Countering Core changes at pane level so that responsive can be applied without being impacted by container dimension*/
@media all and (max-width: 860px) {
    .account-table .streamlined-filter .search-container {
        padding: 2px 0;
    }
    .account-table .streamlined-filter .search-container button {
        height: 32px;
    }
    .account-table .streamlined-filter .type-filter {
        width: initial !important;
    }
}

@media screen and (max-width: 860px) {
    .account-table .streamlined-filter,
    .account-table .streamlined-filter .search-container {
        width: 100%;
    }
    
    .account-table .streamlined-filter .type-filter {
        width: 100% !important; /*Neccessary due to conflict with core.css and core using important in a blanket style*/
    }
    .account-table .streamlined-filter {
        margin-bottom: 10px;
    }
}

/***
    Applications List
***/
.account-table .applications-list {
    
}

.account-table .applications-list table {
 
}

.account-table .applications-list table thead tr {
    background: #64A0E6;
}

.account-table .applications-list table thead tr a {
    color: white;
}

.account-table .applications-list table th a span.sort-up {
    background-image: url("images/grid/grid-sort-up-white.png");
}
.account-table .applications-list table th a span.sort-down {
    background-image: url("images/grid/grid-sort-down-white.png");
}

.account-table .applications-list table tbody tr {
    border: none;
}

.account-table .applications-list table tbody tr.actions {
    padding: 0;
}

    .account-table .applications-list table tbody tr.actions td {
        padding: 0;
    }

.account-table .applications-list table tbody tr.actions td > div {
    display: none;
    float: right;
    margin: 7px;
}

    .account-table .applications-list table tbody tr .fa:hover {
            color: #808080;
        }

    .account-table .applications-list table tbody tr .confirm {

    }

        .account-table .applications-list table tbody tr .action {
            top: 3px;
            position: relative;
            padding: 0 6px;
        }

        .account-table .applications-list table tbody tr .action.disabled {
            opacity: 0.1;
        }

        .account-table .applications-list table tbody tr .confirm-container{
            display: inline-block;
            width: auto;
            transition: 0.5s;
            text-align: center;
            vertical-align: middle;
            display: none;
            white-space: pre-wrap;
        }

            .account-table .applications-list table tbody tr .confirm-container.visible {
                        display: inline-block;
                        align-items: center;
            }

            .account-table .applications-list table tbody tr .confirm-container .sure-text {
                font-size: 12px;
                display: block;
            }



.account-table .applications-list table tbody tr:nth-of-type(2n) {
    background: #F7FBFF;
}
.account-table .applications-list table tbody tr:hover {
    cursor: pointer;
}
.account-table .applications-list table tbody tr:not(.action-row):hover {
    background: #F3F3F3;
}

.account-table .applications-list table tbody tr td:last-of-type {
    position: relative;    
}

.account-table .applications-list table tbody tr td div.paymentdocumentaction a {
    padding-right: 10px;    
}

.account-table .applications-list table tbody tr.action-row td,
.account-table .applications-list table tbody tr.action-row td:last-of-type:after {
}
.account-table .applications-list table tbody tr.action-row td.item-actions {
    display: table-cell;
    text-align: center;
    padding-left: 6px;
}

.account-table .applications-list table tbody tr.action-row td.item-actions > * {
    margin-left: 50px;
}
.account-table .applications-list table tbody tr.action-row td.item-actions > *:first-of-type {
    margin-left: 0;
}

.account-table .applications-list table tbody tr.action-row td.item-actions div {
    height: 0;
    -webkit-transition: 0.1s linear height;
	-moz-transition: 0.1s linear height;
	-o-transition: 0.1s linear height;
    transition: 0.1s ease-out height;
}
.account-table .applications-list table tbody tr.action-row td.item-actions div.open {
    height: 45px;
}
.account-table .applications-list table tbody tr.action-row td.item-actions a {
    float: left;
}

.account-table .applications-list table tbody tr td button {
    border: none;
    background: #65BDEA;
    color: #FFFFFF;
    padding: 2px 5px;
    min-width: 77px;
    border-bottom: 3px solid #2EA6E3 !important;
    overflow: hidden;
}

.account-table .applications-list table tbody tr td .actions{
    float: right;
}
    .account-table .applications-list table tbody tr td .actions a{
        color: #375C88;
    }
.account-table .applications-list table tbody tr td .actions button {
    margin-left: 5px;
    margin-bottom: 2px;
}
.account-table .applications-list table tbody tr td button:hover {
    cursor: pointer;
    color: #2B5F9E;
}
.account-table .applications-list table tbody tr td button:focus {
    outline: none;
    color: black;
}

.account-table .applications-list table tbody tr td .confirmation {
    display: none;
}
.account-table .applications-list table tbody tr td .confirming > button {
    display: none;
}
.account-table .applications-list table tbody tr td .confirming .confirmation {
    display: block;
}
.account-table .applications-list table tbody tr td .confirming .confirmation span {
    font-size: 1.2em;
}

.account-table .applications-list table tfoot {
    background: whitesmoke;
}
.account-table .applications-list table tfoot tr {
    background: none;
}
.account-table .applications-list table tfoot td {
    padding: 20px 0 0 0;
}
.account-table .applications-list table tfoot span,
.account-table .applications-list table tfoot a {
    margin: 0 0 0 1em;
}

@media screen and (max-width: 760px) {
    .account-table .applications-list table, 
    .account-table .applications-list table thead, 
    .account-table .applications-list table tbody, 
    .account-table .applications-list table tfoot, 
    .account-table .applications-list table th, 
    .account-table .applications-list table tr,
    .account-table .applications-list table td { 
        display: block;
    }

    .account-table .applications-list table {
        float: left;
    }

    .account-table .applications-list table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .account-table .applications-list table tbody {
        background: whitesmoke;
    }

    .account-table .applications-list table tbody tr {
        position: relative;
        background: white !important;
        padding: 7px 0 0;
        margin: 0 0 20px 0;
    }

    .account-table .applications-list table tbody tr:last-of-type {
        margin: 0;
    }

    .account-table .applications-list table tbody td {
        position: relative;
        padding: 7px 14px;
    }

    .account-table .applications-list table tbody td.right-responsive {
        position: absolute;
        top: 7px;
        right: 0;
    }
    .account-table .applications-list table tbody td.right-responsive > * {
        float: right;
        font-weight: 700;
    }

    .account-table .applications-list table tbody td.has-heading {
        padding-left: 20%;
    }

    .account-table .applications-list table tbody td.has-heading:before {
        position: absolute;
        top: 7px;
        left: 14px;
        width: 15%;
        content: attr(data-heading) ':';
        font-weight: 700;
    }

    /*Necessary space for cells that are empty for consistent spacing*/
    .account-table .applications-list table tbody td.has-heading:after {
        content: '';
        display: inline-block;
        line-height: 13px;
    }

    .account-table .applications-list table tbody td.has-heading:nth-of-type(even) {
        background: #F7FBFF;
    }

    .account-table .applications-list table tbody tr.action-row td.item-actions {
        padding-top: 8px;
        padding-left: 14px;
    }

    .account-table .applications-list table tbody tr.action-row td.item-actions div.open {
        height: 100px;
    }

    .account-table .applications-list table tbody tr.action-row td.item-actions button {
        clear: both;
        float: left;
    }

    .account-table .applications-list table tbody tr.action-row td.item-actions .confirming .confirmation span {
        display: block;
        padding: 35px 0 10px 15px;
    }

    .account-table .applications-list table tfoot {
        padding: 10px 0 0;
        font-size: 1.5em;
    }

    .account-table .applications-list table tfoot td {
        display: inline;
        margin-top: 10px;
    }

    .account-table .applications-list table tfoot span,
    .account-table .applications-list table tfoot a {
        margin: 0 0 0 1.5em;
    }
}

@media screen and (max-width: 680px) {
    .account-table .applications-list table tbody td.has-heading {
        padding-left: 40%;
    }

    .account-table .applications-list table tbody td.has-heading:before {
        width: 32%;
    }
}

/***
    Account Link
    -(Not sure if used in other places so targeting in my-account section here rather than updating generic definition in core)
    -(Fixes spacing but follows convention in Core.css Using styling to specifically layout out 4 wide, 
        should use flex layout so that the amount of tiles doesn't matter but need IE 9 fallback with approximate spacing)
***/
.account-table .account-link {
    width: 24%;
    margin: 0 1.33333% 0 0;
    margin-bottom: 15px;
}

.account-table .account-link:last-of-type {
    margin: 0;
}

.account-table .account-link a {
    margin: 0;
}

/*for the JSON viewer*/
.busData {
    padding: 0;
    margin: 10px auto;
    border-collapse: collapse;
    border: 1px solid #ccc;
    font-family: "Open Sans Condensed", "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #000;
    width: 100%;
    empty-cells: show;
    background-color: #fff;
}

    .busData th, .busData td {
        border: 1px dotted #666;
        padding: 0;
        text-align: left;
        color: #3a4048;
        vertical-align: text-top;
    }

        .busData th[scope=col] {
            color: #fff;
            background-color: #396b9e;
            border-bottom: 1px dotted #FFF;
            border-right: 1px dotted #FFF;
            padding: 4px;
        }

        .busData th[scope=row] {
            background-color: #eee;
            border-right: 1px solid #ccc;
            color: #3a4048;
            padding: 4px;
        }

    .busData tr.alt th[scope=row], .busData tr.alt td {
        color: #3a4048;
    }

    .busData tr.alt > td {
        background-color: #eee;
        padding: 4px;
    }

    .busData tr td {
        background-color: #fff;
        padding: 4px;
    }

        .busData tr.alt td a, .busData tr td a {
            color: rgb(188,0,47);
            text-decoration: underline;
        }

    .busData table {
        margin: 0;
    }

/*** 
    Awaiting Payment Pane 
***/
.awaiting-payment-total{
    font-weight: bold;
}

.awaiting-payment-amount{
    float: right;
}

.submit-pending-expired{
    display:flex; 
    white-space: nowrap; 
    color: #FF0000
}

.account-table .applications-list table tbody tr .remove-from-awaiting-payment {
    top: 2px !important;
}

.action-icon {
    display:flex; 
    overflow: hidden; 
    white-space: nowrap;
    font-size: 16px; 
    color: #375C88
}