/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/

@media screen and (max-device-width: 480px) and (orientation: portrait) {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    td {
        /* Behave  like a "row" */
        border: none;
        position: relative;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        white-space: nowrap;
    }

    input {
        width: 100px;
    }
}

.allowed-cards {
    padding-left: 9px;
    font-style: italic;
}

/* popup part */

.modal-box {
    display: none;
    position: absolute;
    z-index: 1000;
    width: 100%;
    background: white;
    border-bottom: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-clip: padding-box;
}

.modal-box header, .modal-box .modal-header {
    padding: 1.25em 1.5em;
    border-bottom: 1px solid #ddd;
}

.modal-box header h3, .modal-box header h4, .modal-box .modal-header h3, .modal-box .modal-header h4 {
    margin: 0;
}

.modal-box .modal-body {
    padding: 2em 1.5em;
}

.modal-box footer, .modal-box .modal-footer {
    padding: 1em;
    border-top: 1px solid #ddd;
    background: rgba(0, 0, 0, 0.02);
}

.modal-overlay {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 150%;
    height: 150%;
    background: rgba(0, 0, 0, 0.3) !important;
}

a.close {
    line-height: 1;
    font-size: 1.5em;
    position: absolute;
    top: 5%;
    right: 2%;
    text-decoration: none;
    color: #bbb;
}

a.close:hover {
    color: #222;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}

@media (min-width: 50em) {
    .modal-box {
        width: 30%;
        top: 50%;
        left: 50%;
    }
}

#title {
    padding-bottom: 15px;
    margin-bottom: 0px;
}

#PageTitle1 {
    font-size: 16px;
    margin-bottom: 5px;
    margin-top: 5px;
    /*color: #FF3811;*/
}

.error-message {
    display: none;
    color: #b85d5d;
}

.flexCenter {
    display: flex;
    align-items: center;
}

.flex {
    display: flex;
}

#LogosTable {
    border: 0px;
}

#LogosRow {
    padding: 5px;
    height: 40px;
    float: right;
}

.amx-diners {
    font-size: 0.8em;
    float: right;
    width: 100px;
    text-align: center;
}

.amx-diners > div {
    clear: both;
    line-height: initial;
    /* float: right; */
    /* width: 106px; */
    /*padding-bottom: 11px;*/
    /* margin-left: 10px; */
}

#logo-amex {
    height: 29px;
    padding: 0px 5px 0px 18px;
}

#logo-diners {
    height: 29px;
    padding: 0px 0px 0px 30px;
}

#logo-visa {
    height: 15px;
    padding: 6px 10px 0px 5px;
}

#logo-mastercard {
    height: 30px;
    padding: 0px 10px 0px 5px;
}

#logo-maestro {
    height: 30px;
    padding: 0px 0px 0px 5px;
}

#buttonPayment, #buttonCancel {
    font-family: Tahoma;
    padding: 12px 18px;
}