/*
    General Settings - Dialog
*/

.dialogTitle, .dialogTitle span, .dialogTitlePlaceholder span {
    line-height: 60px;
    height: 60px;
}

.closeDialogWindow {
    width: 60px;
}

.dialogWindow.snapped {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border: 0 !important;
}

@media only screen and (orientation: landscape) and (max-height: 300px) {
    .dialogPortrait {
        margin-top: 10px;
        display: block !important;
        position: relative;
        width: 100%;
    }

    .dialogPortrait p {
        padding:0 20px;
    }

    /* making sure we hide the main body to display */
    .dialogBody, .dialogHeader, .bottomDialogBlock {
        display: none !important;
    }

    .dialogPortrait .glyphicon.glyphicon-phone {
        font-size:48px;
    }
}


    /* Main Settings */
    .dialogWindow {
        position: fixed;
        z-index: 10000;
        display: none;
        background-color: white;
        border: 2px solid lightgrey;
    }

    .dialogBodyPlaceholder p, .dialogPortrait p {
        text-align: center;
    }

    .dialogBodyPlaceholder, .dialogButtonsPlaceholder, .dialogFooterPlaceholder,
    .dialogHeaderPlaceholder {
        margin: 0 auto;
        position: relative;
        display: block;
        width: 90%
    }

    .dialogWindow > .dialogTitle {
        width: 100%;
        position: relative;
        background-color: #5cb85c;
        color: white;
        display: block;
        /* Default gradient for title bar */
        /*
        background: -moz-linear-gradient(0deg,#5cb85c, #003333);
        background: -webkit-linear-gradient(0deg,#5cb85c, #003333);
        background: -o-linear-gradient(0deg,#5cb85c, #003333);
        background: linear-gradient(0deg,#5cb85c, #003333);*/
    }

    .dialogWindow > .dialogTitle .dialogTitleWarning {
        background-color: #fd1c00;
    }

    .dialogWindow > .closeDialogWindow {
        width: 40px;
        height: 100%;
        display: block;
        float: right;
        position: relative;
    }

    #bgoverlay {
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: black;
        background-color: rgba(0,0,0,0.5);
        z-index: 9970 !important;
    }

        #bgoverlay:before {
            content: " ";
            position: fixed;
            background: inherit;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            filter: blur(10px);
            opacity: 0.90;
        }

    .closeDialogWindow {
        height: 100%;
        line-height: 100%;
        display: block;
        position: relative;
        font-size: 24px;
        float: left;
        width: 60px;
        text-align: center;
    }

    a.closeDialogWindow {
        color: white;
    }

    .dialogTitle span, .dialogTitlePlaceholder span {
        vertical-align: middle;
    }

    .dialogTitlePlaceholder span {
        font-size: 20px;
        text-align: center;
        font-weight: bold;
    }

.dialogTitlePlaceholder {
    /*float: left;*/
}

    .bottomDialogBlock {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
    }

    .dialogButtons {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 10px 0;
        background-color: lightgrey;
        /* Default gradient for buttons footer bar */
        /*
        background: -moz-linear-gradient(0deg,#f0f0f0, #b4b4b4);
        background: -webkit-linear-gradient(0deg,#f0f0f0, #b4b4b4);
        background: -o-linear-gradient(0deg,#f0f0f0, #b4b4b4);
        background: linear-gradient(0deg,#f0f0f0, #b4b4b4);*/
    }

    .dialogButtons button {
        padding: 5px 20px;
        position: relative;
        border: 2px solid lightgrey;
    }

    .dialogFooter {
        width: 100%;
        position: relative;
        bottom: 0;
        display: block;
    }

        .dialogFooter span, .dialogFooter p {
            width: 100%;
            font-weight: bold;
        }

    .insertMaxChars {
        text-align: center;
        font-weight: bold;
    }

    .dialogBody {
        margin-top: 10px;
        display: block;
        position: relative;
        width: 100%;
    }

    .dialogPortrait {
        display: none;
    }

    .dialogBody p, .dialogPortrait p {
        clear: both;
        margin: 20px auto;
        font-size: 16px;
        display: block;
    }

    .dialogBody textarea {
        clear: both;
        width: 100%;
        display: block;
        resize: none;
        height: 80px;
    }

    .dialogFooter {
        display: none;
    }

    /*   Card Request   */
    .dtEncapsulated {
        width: 100%;
        display: block;
        position: relative;
    }

        .dtEncapsulated .subEntities {
            display: block;
            position: relative;
            float: left;
        }

    #customerSubsec, #cardEntryFields, #exitCustomerCardSearch, #customerSummarySection {
        display: none;
    }

    .tblEnterCards {
        width: 100%;
        display: table !important;
        position: relative;
    }

    #txtCustomerMemo {
        resize: none;
    }

    .detailList {
        display: block;
        position: relative;
        width: 100%;
        clear: both;
        padding-left: 0;
        list-style: none;
    }

        .detailList li {
            float: left;
            display: block;
            position: relative;
            width: 50%;
        }

            .detailList li span {
                width: 100%;
            }

    #custSumMemo {
        display: block;
        position: relative;
        width: 80%;
        margin: 0 auto;
        clear: both;
    }

    .cancelledSubmit, .cancelledSubmit span {
        background-color: black;
        color: white;
        border: none;
        cursor: not-allowed !important;
    }

    .msg_dialog_info, .msg_success_dialog {
        width: 100%;
        height: 30px;
        display: block;
        line-height: 30px;
    }

    .msg_dialog_info {
        background-color: #101010;
    }

    .msg_success_dialog {
        background-color: lightgray;
    }

        .msg_dialog_info span, .msg_dialog_info p,
        .msg_success_dialog span, .msg_success_dialog p {
            width: 100%;
            display: block;
            color: white;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
        }

    .scrDialogErrors a {
        height: 30px;
        width: 30px;
        display: block;
        line-height: 30px;
        vertical-align: middle;
        text-align: center;
        color: white;
    }

.dialogNavigationChev{
    display:flex;
    position:relative;
    float: right;
    width: 60px;
    margin-left: 10px;
}

@media (max-width:420px) {

    ul#dialogErrorList.errorlist {
        width: 75% !important;
    }

    .dialogNavigationChev {
        width: 25% !important;
    }
}

    .dialogBody .form-control.validationdialogerror::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: white;
        opacity: 0.8; /* Firefox */
        font-weight: bold;
    }

    .dialogBody .form-control.validationdialogerror:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: white;
        font-weight: bold;
    }

    .dialogBody .form-control.validationdialogerror:-ms-input-placeholder { /* Microsoft Edge */
        color: white;
        font-weight: bold;
    }

    .dialogBody .form-control.validationdialogerror {
        background-color: #d9534f;
        color: white;
    }

    .scrDialogErrors a i {
        font-size: 26px;
    }

    ul#dialogErrorList.errorlist {
        display: block;
        list-style: none;
        margin: 0;
        width: 100%;
        position: relative;
        top: 0;
        padding-left: 0;
    }

    ul#dialogErrorList.errorlist li {
        display: block;
        position: relative;
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
        overflow:auto;
    }

    .scrDialogErrors {
        width: 100%;
        height: 30px;
        display: flex;
        overflow: hidden;
    }

        .scrDialogErrors a, .scrDialogErrors ul {
            float: left;
        }

    .Page_CardRequest .resultsEntry {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .Page_CardRequest .itemLine {
        width: 800px;
        position: relative;
        display: block;
        padding: 10px 0;
        list-style: none;
        margin: 0;
        float: left;
    }

    .Page_CardRequest .headinglineInfo {
        width: 100%;
        display: block;
        clear: both;
        color: white;
        background-color: #407d9a;
        height: 40px;
        line-height: 40px;
        vertical-align: middle;
        text-align: center;
    }

    .Page_CardRequest #txtRegNo {
        text-transform: uppercase;
    }

    .Page_CardRequest #tblEnterHeaderCards {
        table-layout: fixed;
        overflow: hidden;
    }

    .Page_CardRequest .resultsData tr {
        overflow: hidden;
    }

    .Page_CardRequest #ulCardDetails {
        width: 520px;
        position: relative;
        display: block;
    }

    .Page_CardRequest #timesAvailable, .Page_CardRequest #newCardsSection,
    .Page_CardRequest #AddHeaderFields {
        display: block !important;
    }

    .Page_CardRequest .resultsContents {
        margin: 0 auto;
        display: block;
        width: 600px;
    }

    .Page_CardEnquiry #stopCardField ul {
        list-style: none;
        margin-bottom: 20px;
    }

    .Page_CardEnquiry #stopCardField ul li > strong {
        width: 40% !important;
        position: relative;
        display: block;
        float: left;
    }

    .Page_CardEnquiry #stopCardField ul li {
        height: 20px;
        display: block;
    }


.Page_AccountSummary .dialogWindow[data-dialog-id=dialogPendingTransactions] .dialogTitle {
    height: 60px;
}

.Page_AccountSummary .dialogWindow[data-dialog-id=dialogPendingTransactions] .bottomDialogBlock {
    height: 58px;
}

.Page_AccountSummary .dialogWindow[data-dialog-id=dialogPendingTransactions] .dialogBody {
    top: 60px;
    bottom: 58px;
    overflow: auto;
    position: absolute;
}

.dialogBody #stopCardField p, .dialogPortrait #stopCardField p {
    margin-top: 0px;
    margin-bottom: 0px;
}