/*Responsive layout
***************************************************************************/

/*media queries not supported in ie8 below - 1024px screen accounted for so shouldn't be an issue*/
@media all and (max-width: 860px) {
    input[type="text"] {
        height: 32px;
    }


    header, footer {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }    

    header {
        height: auto !important;
    }

    #logo {
       background: url(../client-resources?path=images/logo-small.png) no-repeat left center;
    }

    #dcc-interaction {
        padding: 10px 10px 40px;    
    }

    #form-wrapper {
        padding-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #logo {
        margin: 10px 0 0 !important;
    } 

    .services h2, .services.Bookings h2, .services.Payments h2, .services + .services h2 {
        background: #d1d2d4;
        padding-top: 10px;
    }

    #form-wrapper > div > li {
        margin-left: 10px;
    }

    div#payment-gateway div.payment iframe.message-only,
    div#div#cc-token-registration div.payment iframe.message-only {
        height: 110px !important;
    }

    /*Summary table*/
    div.charges-summary-container {
        width: 100% !important;
    }

    div.charges-summary-container div.charges-summary-row div.charges-summary-item.description {
        width: auto !important;
        margin-left: 5px;
    }

    div.charges-summary-container div.charges-summary-row div.charges-summary-item.total {
        float: right;
    }

    /*collapsibles*/

    .collapsible-layout-group.collapsible-parent {
        /*padding: 0 10px 5px;*/
        margin: 5px 0;
    }

    .collapsible-layout-group .collapsible-region .twisty-collapsible-region {
        margin-left: -28px;
    }

    .collapsible-layout-group.collapsible-parent > .twisty-collapsible-region {
        margin-left: -11px;
    }

    .collapsible-layout-group .collapsible-region .twisty-collapsible-region.twisty-on, 
    .collapsible-layout-group .collapsible-region .twisty-collapsible-region.twisty-off {
        background-color: transparent;
    }

    .collapsible-layout-group.collapsible-grandparent {
        width: 100%;
        margin-left: -10px;
        padding-left: 20px !important;
    }

    .collapsible-layout-group > .collapsible-region > section {
        margin-bottom: 5px !important;
    }

    #EmploymentHistory-repeater > div.repeater-item, #EmploymentHistory-AddRegion > div, #BCContactRepeater-repeater .collapsible-parent {
        padding: 10px;
    }


    /*selectables - i.e properties*/

    .dialogue-selection .option {
        height: auto;
        padding-bottom: 0;
    }


    .dialogue-selection label {
        margin-bottom: 0px;
    }

    #myAddresses .account-link a {
        font-size: 12px;
    }
   
   

    /*inputs - buttons, text etc*/

    .question-cell, .questionContent, .questionContent-below, .questionName, .longQuestionName, .question-cell > .label > li {
        float: none;
        text-align: left;
        width: auto;
    }

    div.permission .question-cell, .questionContent, .questionContent-below, .questionName, .longQuestionName, .question-cell > .label > li {
        float: initial;
        text-align: initial;
        width: initial;
    }

    .questionName-text {
        width: auto;
    }

    .questionName, .longQuestionName {
        margin-right: 0 !important;
        margin-bottom: 3px !important;
    }

    .questionName.long.right-full {
        display: inline-block;
    }

    .questionName-text.right-full {
        margin-top: 0;
    }

    .question-cell {
        margin-bottom: 10px;
    }

    div.permission .question-cell {
        margin-bottom: 0px;
    }

    .question-cell .optional {
        text-align: left;
    }
    
    /*TODO: Should this be across all selects or is it missing .questionContent Prefix?*/
    .questionContent input[type="text"], .questionContent textarea, select {
        width: 100% !important;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .questionContent .bank-account-question input.bank {
        width: 30px !important;
    }

    .questionContent .bank-account-question input.branch {
        width: 44px !important;
    }

    .questionContent .bank-account-question input.account {
        width: 66px !important;
    }

    .questionContent .bank-account-question input.aubody {
        width: 90px !important;
    }

    .questionContent .bank-account-question input.suffix {
        width: 36px !important;
    }

    .questionContent .bank-account-question input.bsb {
        width: 56px !important;
    }

    .questionContent .dropdown-time select {
        width: 55px !important;
    }

    .questionContent .subtext {
        text-align: left;
    }
    
    .questionContent .date-time input.hasDatepicker {
        width: 100px !important;
    }
    .questionContent .date-time select {
        width: 100px !important;
    }

    .questionContent .date-time .timeLabel {
        margin-left: 90px !important;
    }

    .verticalOptionList label,
	.collapsible-region .verticalOptionList label {
		 max-width: 100%;
	}

    #search-address input.long {
        width: 100%;
        margin: 10px 0;
    }

    #search-address .button {
        margin-left: 0 !important;
    }

    .bottom-buttons {
        margin-right: 0;
    }

    input.button[type="submit"],
    input.button[type="button"] {
        height: 36px;
    }

    .fileinput-button a,
    .link-button a {
        padding: 6px;
    }
    
    .question-answer-pair {
        position: relative;
    }
    
    .question-help, div.question-answer-pair img.ui-datepicker-trigger {
        position: absolute !important;
        top: 10px;
        right: 10px;
    }

    div.permission .question-help, div.question-answer-pair img.ui-datepicker-trigger {
        position: initial !important;
        top: 0px;
        right: 0px;
    }

    /*Form Error Questions*/
    div.error-question img {
        position:relative !important;
        float: left;
        max-width: 43px;
        margin-top: 0px !important;
        margin-right: 5px;
    }

    /*home realm*/
    .home-realm-text {
        float: none;
        width: auto;
        max-width: 310px;
        margin-top: 20px;
    }

    .home-realm .realme-sidebar {
        float: none;
    }

    div.error-question div.question-cell div.questionContent #recaptcha-validation-message {
        margin: 25px 0px 10px 0px;
    }

}
@media (min-width: 1px) and (max-width: 800px) {
    table.responsive,
    table.responsive thead td,
    table.responsive tbody td,
    table.responsive thead tr,
    table.responsive tbody tr,
    table.responsive thead th {
        display: block;
    }

        table.responsive tbody {
            width: 100%;
            display: block;
        }

        table.responsive thead {
            display: none;
        }

            table.responsive thead tr {
                width: auto;
                overflow: hidden;
            }

            table.responsive thead th {
                width: auto;
                float: left;
                padding: 10px;
            }

        table.responsive tr {
            margin-bottom: 10px;
            width: 100%;
        }

    table.pretty td {
        border: none;
        position: relative;
    }

    table.responsive td:before {
        font-weight: bold;
        margin-right: 10px;
        float: left;
    }

    /* Other plugin specific table.responsive css*/
    .charge-selection-finance table.responsive .charge-amount {
        text-align: left;
    }

    .charge-selection-finance table.responsive .total-checkbox {
        width: auto;
        text-align: left;
    }

    .charge-selection-finance table.responsive tfoot tr {
        background: none;
    }

        .charge-selection-finance table.responsive tfoot tr td {
            border: none;
        }

    table.responsive tbody td[data-heading]:before {
        content: attr(data-heading) ':';
        font-weight: bold;
    }
    table.responsive.documents tbody tr td:first-child {
        display: none;
    }
    table.responsive.documents tbody tr td.fileName a.fileIcon {
        display: inline;
        margin-left: 5px;
    }
    .booking-summary table.statement th.amount,
    .booking-summary table.statement td.amount {
        text-align: left;
    }

    .charge-selection table.responsive{
        border: 0;
    } 

    .charge-selection table.responsive tr.header {
        display: none;
    }
    .charge-selection table.responsive tr.editable-charge-selection-row,
    .charge-selection table.responsive tr.charge-selection-row   {
        background-color: #fff;
        border-left: 1px solid black;
        border-top: 1px solid black;        
    }

    .charge-selection table.responsive .charge-amount {
        text-align: left;
    }
    .charge-selection table.responsive td.total-checkbox {
        text-align: left;
    } 
    .charge-selection table.responsive td.total-checkbox.editable {
        width: auto;
    }
    .charge-selection table.responsive tr.total-row,
    .charge-selection table.responsive tr.total-row td {
        border: none;
    }

}
@media all and (max-width: 720px) {

    /*Wizard*/
    #progress-bar .divider, #progress-bar .step, #progress-bar .step > span:first-child + span, 
    #progress-bar .step > button > span:first-child + span, #step-heading, #progress-bar .current-step,
    #progress-bar .current-step > span:first-child + span,
    #progress-bar > img {
        display: none;
    }

    #progress-bar div.current-step:first-child {
        border-left-color: #dadbd0;
    }

    #progress-bar .step,
    #progress-bar .current-step {
        float: none;
        width: 100%;
        clear: both;
        margin: 0 auto;        
        height: 36px;
        border: 1px solid #dadbd0;
    }

    #progress-bar .page-title, 
    #progress-bar .page-title span {
        display: block;
        font-size: 1em;
        text-align: center;
        margin: 0 auto;
    }

    #progress-bar .page-title {
        margin: 0 auto;
        background: #dadbd0;
            background: -webkit-linear-gradient(bottom, #dadbd0, #e7e9e1);
            background: -moz-linear-gradient(bottom, #dadbd0, #e7e9e1);
            background: -ms-linear-gradient(bottom, #dadbd0, #e7e9e1);
        border-radius: 2px;
        display: block;
    }

    #progress-bar .step button {
        width: 100%;
    }

    #progress-bar .step span:first-child,
    #progress-bar .current-step span:first-child {
        width: 100%;
        color: #494949;
        font-size: 1.2em;
        margin-top: 8px;
    }

    #progress-bar .current-step span:first-child {
        color: White;
    }

    #progress-bar .page-title span:first-child {
        color: #494949;
    }

    #progress-bar .current-step.page-title span.step_cr {
        display: block;
        background: url(images/wizard/wizard-dropdown-arrow.png) no-repeat;
        float: right;
        margin-top: -24px !important;
        padding: 10px 0;
        margin-right: 0 !important;
        width: 100% !important;
        background-position: 98% center !important;
    }

    #progress-bar .step > span.disabled-step {
        color: #A4A4A4;
    }
    
    #dropdown-progress-bar div.wizard-step-arrow {
        display: none;
    }
    
    #dropdown-progress-bar .dd-container,
    #dropdown-progress-bar .dd-container .dd-select,
    #dropdown-progress-bar .dd-container .dd-options {
        width: 100%;
    }


    #dropdown-progress-bar > div {
        width: 100%;
    }    
    
        .application-summary .upload-filelist tbody td:first-child + td {
        max-width: 200px;   
    }
    
        .application-summary div#dialogue-tabs-nav li {
            font-size: 1.5em;
        padding-right: 15px;
    }
    
        .application-summary .history-table {
        width: 100%;   
    }
        .session-speaker-space, .session-speaker-full {
            margin-left: 20px;
        }

        
    .charge-selection.finance .total-checkbox.editable input[type="number"] {
        width: 75px;
    }

}

@media screen and (max-width: 400px) {	
        .services 
        {
            display: block;
            width: 100%;
        }

        .services-list, .services-list-small 
        {
            width: 100%;
            margin-bottom: 40px;
        }

        .services-list .services, .services-list-small .services 
        {
            width: 100% !important;
        }

        .login-sidebar, .logged-in-sidebar, .realme-sidebar, .realme-logged-in-sidebar 
        {
            width: 100%;
        }     

        .application-summary div.headerInfo 
        {
            width: 100%;
        }

        .application-summary .upload-filelist tbody td:first-child + td 
        {
            max-width: 100px;   
        }
        
        .realme-description.bottom {
            margin-right: auto;
        }   

        /*Form Error Questions*/
        div.error-question img 
        {
            margin-left: -15px;
            margin-top: -3px;
        }

        .applications#dogs .dog, .applications#dogs .dog.long {
            width: 100%;
            margin-right: 20px;
        }
        .session-speaker-space, .session-speaker-full {
            margin-left: 0px;
        }

        .questionContent .date-time input.hasDatepicker {
            width: 95px !important;
        }
        .questionContent .date-time select {
            width: 95px !important;
        }

        .questionContent .date-time .timeLabel {
            margin-left: 85px !important;
        }
        
    .charge-selection.finance .total-checkbox.editable input[type="number"] {
        width: 60px;
    }
}


/* My Account Filters*/
/*filter
-------------------------------------------------*/

@media all and (max-width: 1100px) {
    #filter .application-filter {
        width:45% !important;
    }  
}

@media all and (max-width: 1050px) {
    #filter .application-filter select, .ms-parent {
        width: 220px !important;
    }

    #filter .application-filter.long input {
        width: 210px;
    }

    #filter .application-filter input, #filter .application-filter input#FilterCriteria_FreeText {
        width: 210px;
    }
}

@media all and (max-width: 940px) {
    .ui-datepicker-trigger {
        margin-top: 10px;
    }
}

@media all and (max-width: 890px) {
    .ui-datepicker-trigger {
        margin-top: 7px;
    }
}

@media all and (max-width: 705px) {
    #filter .application-filter {
        width:100% !important;
    }

    .ui-datepicker-trigger {
        margin-top: 10px;
    }


}

@media all and (max-width: 630px) {
    
    .events-table-link {
        display: block;
    }

    .events-table-link.active::after {
        margin-left: 0;
        margin-top: 5px;
    }

    .events-details, .events-table .file-size, .events-table .file-date {
        min-width: 0;
    }
}
 
@media all and (max-width: 590px){
    #filter .application-filter select, .ms-parent {
        width: 60% !important;
    }

    #filter .application-filter input, #filter .application-filter.long input, #filter .application-filter input#FilterCriteria_FreeText {
        width:60%;
    }

    #filter tr td+td {
        float:left;
        width:25% !important;
    }

    .services-list-small {
        width: 100%;
        padding-right: 0;
        margin-right: 0;
    }

    .services-list-small .services {
        width: 45%;
    }

    .realme-sidebar, .realme-logged-in-sidebar {
        float: left;
    }

    .realme_popup {
        padding: 0.3em 1.1em 0.5em;
        width: 300px !important;
    }

    .realme_arrow_top_left {
        margin: 0;
    }
    
    .realme_arrow_top_left .arrow {
        left: 7.5em;  
    }

    .realme-sidebar{
        margin-bottom: 260px;
    }
}

@media all and (max-width: 550px) {
    .account-link {
        width: 100%;
    }
}

@media all and (max-width: 550px){

    #filter .application-filter select, .ms-parent {
        width: 60% !important;
    }


    #filter .application-filter input, #filter .application-filter.long input, #filter .application-filter input#FilterCriteria_FreeText {
        width:50%;
    }
    #filter label {
        width: 60px;
    }
    .ui-datepicker-trigger {
    margin-top: 6px;
    }

    .login-sidebar th {
        -webkit-border-top-left-radius: 0px;
        -webkit-border-top-right-radius: 0px;
        -moz-border-radius-topleft: 0px;
        -moz-border-radius-topright: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px; 
    }

    .services-list .services {
        width: 85%;
    }

    .session-speaker-space, .session-speaker-full {
        margin-right: 0;
    }
}