/* ============= 1. Existing Details Box =============*/
.outlinegray {
    border-radius: 0px !important; /*remove*/
    border: 0px !important; /*remove*/
}

    .outlinegray table tr td:last-child strong {
        font-weight: 100; /*inline override - remove bold font*/
    }

    .outlinegray table tr td {
        border-bottom: 1px solid #FFF !important;
        background: #e3F1FF; /*second column background*/
    }

        .outlinegray table tr td:first-child {
            background: #d6ebff;
        }
    /*first column background*/

    .outlinegray table tr.payment-amt td { /* payment amount row */
        border-top: 1px solid #FFF !important; /*inline override*/
        background: #4aa5ff;
        color: #FFF;
        text-shadow: 1px 1px 5px rgba(150, 150, 150, 0.7);
    }


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .ipadissueClass {
        width: 200px !important;
    }

    .surchargePnl {
        max-width: 150% !important;
        width: 106% !important;
    }
}

@media (max-width: 767px) {

    /* ============= 4. Navigation Buttons (max-width:767px) ============= */
    .btn {
        display: block;
        margin-bottom: 7px;
        padding: 10px;
    }
    /*grey buttons*/
    button.btn.btn-primary {
        display: block;
        width: 100%;
    }
    /*blue buttons*/
    button.btn {
        display: block;
        width: 100%;
    }
    /*blue buttons*/

    .headerlogo {
        margin-top: 3px !important;
        margin-right: 2px !important;
    }

    /* ============= 8. Container Padding (max-width:767px) ============= */
    #bodyMaster {
        /*padding-left:8px;
		padding-right:8px;*/
    }

    /*============= 12. Label Margin (max-width:767px) ============= */
    label {
        margin-bottom: 0px;
    }


    /* ============= 6. Layout (max-width:767px) ============= */
    .control-group {
        margin-bottom: 9px;
        border-top: 0px;
    }

        .control-group div.row {
            border: 1px solid #EEE;
            border-top: 0px;
            padding: 4px 3px;
            width: auto;
            display: block;
            margin-left: 0px;
        }

            .control-group div.row:first-child {
                border-top: 1px solid #EEE;
            }

            .control-group div.row div.span8 div.row {
                background: none;
                margin-top: 0px;
                border: 0px;
                padding: 0px;
                margin-left: 0px !Important;
            }

    /* ============= 2. Label Alignment (max-width:767px) ============= */
    .label-alignment {
        display: block;
        clear: both;
    }

    /* ============= Transaction Type Label Alignment (max-width:767px) ============= */
    .row::before, .row::after {
        display: inline;
    }

    .PaypalProceedButton {
        margin-left: 0px !important;
        text-align: center !important;
    }
}


@media (min-width: 768px) {
    /* ============= 11. grouping of ((min-width:768px)) ============= */
    .control-group {
        margin-bottom: 0px;
        padding: 9px 0px;
    }

    div.control-group:nth-child(odd) {
        background: #F8F8F8;
    }
}



.outlinegray table.SuchargePanel tr td:first-child {
    background-color: #d6ebff !important;
    font-weight: bold !important;
}

.outlinegray table.SuchargePanel tr td:last-child {
    background-color: #d6ebff !important;
}

/*OPG-192*/
.to-upper {
    text-transform: uppercase;
}

/*@media (max-width: 767px) {
    select {
        width:100%!important;
    }
}*/

@media screen and (max-width:480px) {
    .dropdown {
        width: 100% !important;
    }
}

@media screen and (max-width:480px) {
    .paypalLogo {
        padding-right: 0px !important;
    }

    .cardImageSize {
        width: 14% !important;
    }

    .PaypalProceedButton {
        margin-left: 0px !important;
        text-align: center !important;
    }
}

/*@media (max-width: 1100px) {
    .cardImageSize {
        max-height: 20px;
    }
}*/

/*@media (min-width: 320px) and (max-width: 480px) {
  
   .PaypalProceedButton {
        margin-left: 0px !important;
        text-align:center!important;
    }
  
}*/


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    .cardImageSize {
        width: 12% !important;
    }

    .paypaliPadissue {
        float: none !important;
        padding-right: 0px !important;
        margin-left: 5px;
        width: 27%;
    }

    .paypalAlign {
        margin-left: 64px;
    }

    .ipadpotriate {
        margin-left: 29px !important;
    }
}

@media (max-width: 1024px) and (orientation : landscape) {
    .cardImageSize {
        width: 12% !important;
    }

    .paypaliPadissue {
        float: none !important;
        padding-right: 0px !important;
        margin-left: 5px;
        width: 27%;
    }

    .paypalAlign {
        margin-left: 76px;
    }
}

.PaypalProceedButton {
    margin-left: 57px;
}

/* Landscape*/

@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .paypaliPadissue {
        padding-right: 72px !important;
    }
}

/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .ipadpotriate {
        margin-left: 36px !important;
    }
}