﻿
    #checkoutContainer { position:relative; }
    #checkoutContainer.busy:before { content: ''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,.5); z-index:10; }
    #checkoutContainer.busy2:after
    {
        content: '';
        position: absolute;
        top:50%; 
        left:50%;
        margin-top:-3em;
        margin-left:-3em;
        z-index:11;
        width:5.5em;
        height:5.5em;
        /*border-top: 1.1em solid rgba(55, 55, 55, 0.2);
        border-right: 1.1em solid rgba(55, 55, 55, 0.2);
        border-bottom: 1.1em solid rgba(55, 55, 55, 0.2);
        border-left: 1.1em solid rgba(55, 55, 55, 1);*/
        border-top: 1.1em solid #ddd;
        border-right: 1.1em solid #ddd;
        border-bottom: 1.1em solid #ddd;
        border-left: 1.1em solid #333;
        border-radius:50%;
        transform: translateZ(0);
        animation: spin 1.1s infinite linear;
        background-color:#fff;
        transform:translate(-50%, -50%, 0);
        box-shadow:0px 0px 3px 6px #fff;
    }
    #checkoutContainer.busy:after
    {
        content: '';
        /*position: absolute;*/
        position: fixed;
        top:calc(50% - 25px);
        left:calc(50% - 25px);
        /*top:50%; 
        left:50%;
        margin-top:-25px;
        margin-left:-25px;*/
        display: block;
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        box-shadow: inset 2px 0 2px #6AA5FF, -2px 0 2px #488CF1;
        animation: spin 1s infinite linear;
        border-radius: 100%;
        margin: 0;
        transform-origin: center;
        z-index:11;
    }
    @keyframes spin
    {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

.loader-sm
{
    display:inline-block;
    width:1.8rem;
    height:1.8rem;
    flex:0 0 1.8rem;
    box-shadow:inset 1px 0 1px #6AA5FF, -1px 0 1px #488CF1;
    animation:spin 1s infinite linear;
    border-radius:100%;
    margin:0;
    transform-origin:center;
}

.rounded { border-radius:4px; }
.large { font-size:120%; }
/*.highlight {
    padding: 9px 14px;
    margin-bottom: 14px;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    border-radius: 4px;
}*/
.bg-highlight { background-color: #f7f7f9; }

.fancy-radio { border-radius:4px !important; border:1px solid #ddd !important; position:relative; cursor:pointer; background-color:#fff; }
.fancy-radio.block { display:block; }
.fancy-radio.selected { color: #fff; background-color: #428bca; border-color: #357ebd; background-color:rgb(227, 51, 46); border-color:rgb(227, 51, 46); }
.fancy-radio:before { content:'✔'; content:'\2713'; font-weight:bold; position:absolute; top:50%; left:8px; left:10px; transform:translateY(-50%); visibility:hidden; color:#fff; }
.fancy-radio.selected:before { visibility:visible; }
.fancy-radio span { display:block; }
.fancy-radio input[type="radio"] { display:none !important; }
.fancy-radio:hover, .fancy-radio:focus, .fancy-radio:active, .fancy-radio.active {
    color:#fff;
    background-color:#3071a9;
    border-color:#285e8e;
    background-color:#e95f5b;
    border-color:rgb(227, 51, 46);
}

#tab-headings .nav a { font-weight:bold; }
#tab-headings .nav a.btn-default { cursor:default; }
#tab-headings .nav a.btn-default:hover { background-color:transparent; }
#tab-headings .btn-warning:hover, #tab-headings .btn-warning:focus, #tab-headings .btn-warning:active, #tab-headings .btn-warning.active {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512;
}
#tab-headings .btn-primary:hover, #tab-headings .btn-primary:focus, #tab-headings .btn-primary:active, #tab-headings .btn-primary.active {
    color: #fff;
    background-color: #3071a9;
    border-color: #285e8e;
}

.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media screen and (min-width:480px) {
    .no-wrap-sm { white-space:nowrap; }
    .show-small { display:none; }
}
@media screen and (max-width:479.98px) {
    .table-cart
    {
        font-size:80%;
    }
    .hide-small { display:none; }
    .show-small { display:inline; }
    .cart-container { /*padding-right:15px !important;*/ }
    .sm-block { display:block; }
}

/* Undo unwanted change from custom.css */
@media screen and (min-width: 1024px) {
    .modal-dialog {
        width:600px;
    }
}

@media (min-width: 768px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}




.stage.busy:before { content: ''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,.5); z-index:110; }
.stage.busy:after
{
    content: '';
    position: absolute;
    /*position: fixed;*/
    top:calc(50% - 25px);
    left:calc(50% - 25px);
    /*top:50%; 
    left:50%;
    margin-top:-25px;
    margin-left:-25px;*/
    display: block;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    box-shadow: inset 2px 0 2px #6AA5FF, -2px 0 2px #488CF1;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    margin: 0;
    transform-origin: center;
    z-index:111;
}



/* Paypal card fields */

.paypal-button-container {
    border-radius: 5px;
    background-color: #FFFFFF;
    padding: 20px;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}
.paypal-card-container .card_container {
    border-radius: 5px;
    background-color: #FFFFFF;
    padding: 20px;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}
.paypal-card-container .card_field{
    width: 100%;
    padding:0 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    height:40px;
    background:white;
    font-size:17px;
    color:#3a3a3a;
    font-family:helvetica, tahoma, calibri, sans-serif;
}
.paypal-card-container .card_field_50{
    width: 50%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    height:40px;
    background:white;
    font-size:17px;
    color:#3a3a3a;
    font-family:helvetica, tahoma, calibri, sans-serif;
}
.paypal-card-container .card_field_75{
    width: 75%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    height:40px;
    background:white;
    font-size:17px;
    color:#3a3a3a;
    font-family:helvetica, tahoma, calibri, sans-serif;
}
.paypal-card-container .row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    margin: 0 -16px;
}
.paypal-card-container .col-25 {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
}
.paypal-card-container .col-50 {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
}
.paypal-card-container input[type=text], .paypal-card-container select, .paypal-card-container textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    height:40px;
    background:white;
    font-size:17px;
    color:#3a3a3a;
    font-family:helvetica, tahoma, calibri, sans-serif;
}
.paypal-card-container input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.paypal-card-container .message_container {
    border-radius: 5px;
    background:#FFFFFF;
    font-size:13px;
    font-family:monospace;
    padding: 20px;
}
.paypal-card-container #loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}
.paypal-card-container #loading-image {
    position: absolute;
    z-index: 15;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
}
.paypal-card-container .spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /* height of the spinner gif +2px to fix IE8 issue */
}
.paypal-card-container .button_container {
    display: flex;
    justify-content: center;
}
/*.paypal-card-container button:hover {
    background-color: powderblue;
}
.paypal-card-container button {
    width:229px;
    height:49px;
    background:lightblue;
    border:1px dotted black;
    font-size:17px;
    color:#3a3a3a;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 auto;
}
.paypal-card-container .btn_small{
    width:130px;
    height:39px;
    background:lightblue;
    border:1px dotted black;
    font-size:14px;
    color:#3a3a3a;
}
.paypal-card-container .btn_small:hover {
    background-color: powderblue;
}*/






    /*https://github.com/diqidoq/qcss/blob/master/css/qcss.css*/
    /*.m0
    {
        margin-top: 0px !important;
        margin-right: 0px !important;
        margin-bottom: 0px !important;
        margin-left: 0px !important;
    }

    .mt0
    {
        margin-top: 0px !important;
    }

    .mr0
    {
        margin-right: 0px !important;
    }

    .mb0
    {
        margin-bottom: 0px !important;
    }

    .ml0
    {
        margin-left: 0px !important;
    }

    .p0
    {
        padding-top: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 0px !important;
        padding-left: 0px !important;
    }

    .pt0
    {
        padding-top: 0px !important;
    }

    .pr0
    {
        padding-right: 0px !important;
    }

    .pb0
    {
        padding-bottom: 0px !important;
    }

    .pl0
    {
        padding-left: 0px !important;
    }

    .m1
    {
        margin-top: 6px !important;
        margin-right: 6px !important;
        margin-bottom: 6px !important;
        margin-left: 6px !important;
    }

    .mt1
    {
        margin-top: 6px !important;
    }

    .mt-1
    {
        margin-top: -6px !important;
    }

    .mr1
    {
        margin-right: 6px !important;
    }

    .mr-1
    {
        margin-right: -6px !important;
    }

    .mb1
    {
        margin-bottom: 6px !important;
    }

    .mb-1
    {
        margin-bottom: -6px !important;
    }

    .ml1
    {
        margin-left: 6px !important;
    }

    .ml-1
    {
        margin-left: -6px !important;
    }

    .p1
    {
        padding-top: 6px !important;
        padding-right: 6px !important;
        padding-bottom: 6px !important;
        padding-left: 6px !important;
    }

    .pt1
    {
        padding-top: 6px !important;
    }

    .pt-1
    {
        padding-top: -6px !important;
    }

    .pr1
    {
        padding-right: 6px !important;
    }

    .pr-1
    {
        padding-right: -6px !important;
    }

    .pb1
    {
        padding-bottom: 6px !important;
    }

    .pb-1
    {
        padding-bottom: -6px !important;
    }

    .pl1
    {
        padding-left: 6px !important;
    }

    .pl-1
    {
        padding-left: -6px !important;
    }

    .mh1
    {
        min-height: 58px !important;
    }

    .xh1
    {
        max-height: 58px !important;
        height: 58px !important;
        overflow: hidden;
    }

    .m2
    {
        margin-top: 12px !important;
        margin-right: 12px !important;
        margin-bottom: 12px !important;
        margin-left: 12px !important;
    }

    .mt2
    {
        margin-top: 12px !important;
    }

    .mt-2
    {
        margin-top: -12px !important;
    }

    .mr2
    {
        margin-right: 12px !important;
    }

    .mr-2
    {
        margin-right: -12px !important;
    }

    .mb2
    {
        margin-bottom: 12px !important;
    }

    .mb-2
    {
        margin-bottom: -12px !important;
    }

    .ml2
    {
        margin-left: 12px !important;
    }

    .ml-2
    {
        margin-left: -12px !important;
    }

    .p2
    {
        padding-top: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 12px !important;
    }

    .pt2
    {
        padding-top: 12px !important;
    }

    .pt-2
    {
        padding-top: -12px !important;
    }

    .pr2
    {
        padding-right: 12px !important;
    }

    .pr-2
    {
        padding-right: -12px !important;
    }

    .pb2
    {
        padding-bottom: 12px !important;
    }

    .pb-2
    {
        padding-bottom: -12px !important;
    }

    .pl2
    {
        padding-left: 12px !important;
    }

    .pl-2
    {
        padding-left: -12px !important;
    }

    .mh2
    {
        min-height: 73px !important;
    }

    .xh2
    {
        max-height: 73px !important;
        height: 73px !important;
        overflow: hidden;
    }

    .m3
    {
        margin-top: 18px !important;
        margin-right: 18px !important;
        margin-bottom: 18px !important;
        margin-left: 18px !important;
    }

    .mt3
    {
        margin-top: 18px !important;
    }

    .mt-3
    {
        margin-top: -18px !important;
    }

    .mr3
    {
        margin-right: 18px !important;
    }

    .mr-3
    {
        margin-right: -18px !important;
    }

    .mb3
    {
        margin-bottom: 18px !important;
    }

    .mb-3
    {
        margin-bottom: -18px !important;
    }

    .ml3
    {
        margin-left: 18px !important;
    }

    .ml-3
    {
        margin-left: -18px !important;
    }

    .p3
    {
        padding-top: 18px !important;
        padding-right: 18px !important;
        padding-bottom: 18px !important;
        padding-left: 18px !important;
    }

    .pt3
    {
        padding-top: 18px !important;
    }

    .pt-3
    {
        padding-top: -18px !important;
    }

    .pr3
    {
        padding-right: 18px !important;
    }

    .pr-3
    {
        padding-right: -18px !important;
    }

    .pb3
    {
        padding-bottom: 18px !important;
    }

    .pb-3
    {
        padding-bottom: -18px !important;
    }

    .pl3
    {
        padding-left: 18px !important;
    }

    .pl-3
    {
        padding-left: -18px !important;
    }

    .mh3
    {
        min-height: 88px !important;
    }

    .xh3
    {
        max-height: 88px !important;
        height: 88px !important;
        overflow: hidden;
    }

    .m4
    {
        margin-top: 24px !important;
        margin-right: 24px !important;
        margin-bottom: 24px !important;
        margin-left: 24px !important;
    }

    .mt4
    {
        margin-top: 24px !important;
    }

    .mt-4
    {
        margin-top: -24px !important;
    }

    .mr4
    {
        margin-right: 24px !important;
    }

    .mr-4
    {
        margin-right: -24px !important;
    }

    .mb4
    {
        margin-bottom: 24px !important;
    }

    .mb-4
    {
        margin-bottom: -24px !important;
    }

    .ml4
    {
        margin-left: 24px !important;
    }

    .ml-4
    {
        margin-left: -24px !important;
    }

    .p4
    {
        padding-top: 24px !important;
        padding-right: 24px !important;
        padding-bottom: 24px !important;
        padding-left: 24px !important;
    }

    .pt4
    {
        padding-top: 24px !important;
    }

    .pt-4
    {
        padding-top: -24px !important;
    }

    .pr4
    {
        padding-right: 24px !important;
    }

    .pr-4
    {
        padding-right: -24px !important;
    }

    .pb4
    {
        padding-bottom: 24px !important;
    }

    .pb-4
    {
        padding-bottom: -24px !important;
    }

    .pl4
    {
        padding-left: 24px !important;
    }

    .pl-4
    {
        padding-left: -24px !important;
    }

    .mh4
    {
        min-height: 103px !important;
    }

    .xh4
    {
        max-height: 103px !important;
        height: 103px !important;
        overflow: hidden;
    }

    .m5
    {
        margin-top: 30px !important;
        margin-right: 30px !important;
        margin-bottom: 30px !important;
        margin-left: 30px !important;
    }

    .mt5
    {
        margin-top: 30px !important;
    }

    .mt-5
    {
        margin-top: -30px !important;
    }

    .mr5
    {
        margin-right: 30px !important;
    }

    .mr-5
    {
        margin-right: -30px !important;
    }

    .mb5
    {
        margin-bottom: 30px !important;
    }

    .mb-5
    {
        margin-bottom: -30px !important;
    }

    .ml5
    {
        margin-left: 30px !important;
    }

    .ml-5
    {
        margin-left: -30px !important;
    }

    .p5
    {
        padding-top: 30px !important;
        padding-right: 30px !important;
        padding-bottom: 30px !important;
        padding-left: 30px !important;
    }

    .pt5
    {
        padding-top: 30px !important;
    }

    .pt-5
    {
        padding-top: -30px !important;
    }

    .pr5
    {
        padding-right: 30px !important;
    }

    .pr-5
    {
        padding-right: -30px !important;
    }

    .pb5
    {
        padding-bottom: 30px !important;
    }

    .pb-5
    {
        padding-bottom: -30px !important;
    }

    .pl5
    {
        padding-left: 30px !important;
    }

    .pl-5
    {
        padding-left: -30px !important;
    }

    .mh5
    {
        min-height: 118px !important;
    }

    .xh5
    {
        max-height: 118px !important;
        height: 118px !important;
        overflow: hidden;
    }*/
