﻿@font-face {
    font-family: 'poppinsmedium';
    src: url('../../assets/fonts/poppins/poppins-medium-webfont.woff') format('woff2'),url('../assets/fonts/poppins/poppins-medium-webfont.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'paypal_sans_bigregular';
    src: url('../../assets/fonts/paypal/paypalsansbig-regular-klim-webfont.woff2') format('woff2'), url('fonts/paypal/paypalsansbig-regular-klim-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'paypal_sans_small_mediumRg';
    src: url('../../assets/fonts/paypal/paypalsanssmall-medium-klim-webfont.woff2') format('woff2'), url('fonts/paypal/paypalsanssmall-medium-klim-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'paypal_sans_smallregular';
    src: url('../../assets/fonts/paypal/paypalsanssmall-regular-klim-webfont.woff2') format('woff2'), url('fonts/paypal/paypalsanssmall-regular-klim-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    var-MainColor: #0f3657;
    --main-color: #0f3657;
    var-SubColor: #083308;
    --sub-color: #083308;
    var-MainButton: #c86b1d;
    --main-button: #c86b1d;
    var-MainButton-Hover: #bd661c;
    --main-button-hover: #bd661c;
    var-PriceHighlight: #c86b1d;
    --price-highlight: #c86b1d;
}

#PnlAccount {width:100%; padding-top:0px; padding-bottom:10px; box-sizing:border-box}

#PnlAccount .newcustomer {font-family: 'poppinsmedium';width:96%; margin:auto; -moz-box-sizing: border-box;box-sizing: border-box; border-radius:0px; margin-top:20px}
#PnlAccount .returncustomer {width:96%; margin:auto; margin-top:20px;-moz-box-sizing: border-box;box-sizing: border-box; border-radius:0px}
#PnlAccount .button {cursor: hand; background-color:var(--main-button); width:100%; height:45px; border:0px; font-family:'poppinsmedium'; color:White; font-size:17px; -webkit-appearance: none;margin:auto; padding-top:3px;-webkit-border-radius:5px;border-radius:5px;}
#PnlAccount .textbox {width:100%; height:50px; font-size:14px; border:1px solid #666666; box-sizing:border-box; padding:15px; outline:none; color:#666666}
#PnlAccount p {width:100%; margin:auto;overflow:hidden; margin-top:10px}
#PnlAccount h1{font-family: 'poppinsmedium', sans-serif; font-size:25px;color:#22330f;margin:0px;padding:0px;margin-left:10px; font-weight:500}

#PnlEmail {
    border:1px solid #000000;
}

#PnlDetails {font-family: 'poppinsmedium';width:100%; padding-top:10px; padding-bottom:10px}
#PnlDetails .bill-address {width:94%; border:1px solid #000}
#PnlDetails .del-address {width:94%; border:0px solid #000; padding-bottom:10px}
#PnlDetails  .textbox {width:100%; height:50px; font-size:14px; border:1px solid #666666; box-sizing:border-box; padding:15px; margin-top:10px; outline:none; color:#666666}
#PnlDetails p {width:96%; margin:auto;overflow:hidden}
#PnlDetails .title {font-weight:200; font-size:18px}
#PnlDetails .button {cursor: hand; background-color:var(--main-button); width:100%; height:45px; border:0px; font-family:'poppinsmedium'; color:White; font-size:17px; -webkit-appearance: none;margin:auto; padding-top:3px;-webkit-border-radius:5px;border-radius:5px;}

.MyDropDownList {
    border: 1px solid #000000;
    width: 100%;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    box-sizing: border-box;
    font-size: 14px;
    height: 50px;
    background-color: #ffffff;
    outline: none;
    padding-left: 10px;
    box-sizing: border-box;
    padding: 15px;
    color: #000000
}

#deliveryoptions {
    width: 100%;
    margin: auto;
    text-align: left;
    font-size: 14px;
    moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
    line-height: 12px
}
    #deliveryoptions input[type="radio"] {
        appearance: none;
        background-color: #fff;
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 1.8em;
        height: 1.8em;
        border: 0.15em solid var(--sub-color);
        border-radius: 50%;
        display: grid;
        place-content: center;
    }

        #deliveryoptions input[type="radio"]::before {
            content: "";
            width: 1.0em;
            height: 1.0em;
            border-radius: 50%;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em var(--sub-color);
        }

    #deliveryoptions  input[type="radio"]:checked::before {
        transform: scale(1);
    }


#PnlBilling {font-family: 'poppinsmedium';width:100%; padding-top:10px; padding-bottom:10px}
#PnlBilling .textbox {width:100%; height:50px; font-size:14px; border:1px solid #666666; box-sizing:border-box; padding:15px; outline:none; color:#666666}
#PnlBilling p {width:96%; margin:auto;overflow:hidden; margin-top:10px}
#PnlBilling .title {font-weight:bold; font-size:18px}
#PnlBilling .button {cursor: hand; background-color:var(--main-button); width:96%; height:45px; border:0px; font-family:'poppinsmedium'; color:White; font-size:20px; -webkit-appearance: none;-webkit-border-radius: 0; margin:auto; border-radius:0px}

#giftcards {font-family: 'poppinsmedium';width:94%; margin:auto; font-size:14px;moz-box-sizing: border-box;box-sizing: border-box; padding:10px; border:1px solid #999999; margin-bottom:10px}
#giftcards .textbox {width:96%; height:50px; font-size:13px; padding-left:10px; margin:auto; box-sizing:border-box; color:#999999}
#giftcards .button {cursor: hand; background-color:#666; width:96%; height:45px; border:0px; font-family:'poppinsmedium'; color:White; font-size:16px; -webkit-appearance: none;-webkit-border-radius: 0; margin-top:10px; border-radius:0px}

.AddAGift {
    font-family: 'poppinsmedium';
    width: 94%;
    margin: 0 auto 10px;
    font-size: 14px;
    box-sizing: border-box;
    padding: 10px 10px 10px 40px;
    border: 1px solid #999999;
    background-color: white;
    cursor: pointer;
    text-align: left;
    -moz-box-sizing: border-box;
    color: var(--sub-color);
}

.RemoveAGift {
    font-family: 'poppinsmedium';
    width: 94%;
    margin: 0 auto 0px;
    font-size: 14px;
    box-sizing: border-box;
    padding: 10px 10px 0px 4px;
    background-color: white;
    cursor: pointer;
    text-align: left;
    -moz-box-sizing: border-box;
    border: 0px;
    color: var(--sub-color);
}

#totals {font-family: 'poppinsmedium';}
#totals .totaltable {font-family: 'poppinsmedium';width:100%; background-color:#ebe8f1; border-top:1px solid #666; border-bottom:1px solid #666; font-size:16px; color:#000000; padding:10px}
#totals .total {font-size:18px; color:#ff0000}

#creditcard {font-family: 'poppinsmedium';width:100%; margin:auto; font-size:14px;moz-box-sizing: border-box;box-sizing: border-box; padding:10px; border-bottom:1px solid #999999; margin-bottom:10px; margin-top:0px}
#creditcard .title {font-weight:bold; font-size:18px}
#creditcard .button {cursor: hand; background-color:var(--main-button); width:100%; height:45px; border:0px; font-family:'poppinsmedium'; color:White; font-size:17px; -webkit-appearance: none;-webkit-border-radius: 0; margin:auto; border-radius:0px;padding-top:3px}
#creditcard .textbox {width:100%; height:50px; font-size:14px; border:1px solid #666666; box-sizing:border-box; padding:15px; outline:none}
#creditcard .expiry-date {width:100%; height:50px; font-size:14px; border:1px solid #666666; box-sizing:border-box; padding:15px; outline:none}
#creditcard .credit-card {width:100%; height:50px; font-size:14px; border:1px solid #666666; box-sizing:border-box; padding:15px; outline:none}

#creditcard {
    font-family: 'poppinsmedium';
    width: 100%;
    margin: auto;
    text-align: left;
    font-size: 14px;
    moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
    line-height: 12px
}

    #creditcard input[type="radio"] {
        appearance: none;
        background-color: #fff;
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 1.8em;
        height: 1.8em;
        border: 0.15em solid var(--sub-color);
        border-radius: 50%;
        display: grid;
        place-content: center;
    }

        #creditcard input[type="radio"]::before {
            content: "";
            width: 1em;
            height: 1em;
            border-radius: 50%;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em var(--sub-color);
        }

        #creditcard input[type="radio"]:checked::before {
            transform: scale(1);
        }

#comments {width:100%; margin:auto; font-size:14px;moz-box-sizing: border-box;box-sizing: border-box; padding:10px; border-top:1px solid #999999; border-bottom:1px solid #999999; margin-bottom:10px; background-color:#f3f1ed; margin-top:20px}
#comments .textbox {height:50px; font-size:16px; padding-left:10px; margin:auto; box-sizing:border-box}

#paypal {width:94%; margin:auto; font-size:14px;moz-box-sizing: border-box;box-sizing: border-box; padding:10px; border:1px solid #999999; margin-bottom:10px}

.newsletterbox {width:100%;color:#000000; padding:5px; margin-bottom:10px}

.blankpanel {padding:20px; font-size:16px; padding-top:40px}

input[type=checkbox] {
    accent-color: var(--sub-color);
}

#PnlCheckoutheader {
    font-family: 'poppinsmedium';
    border-bottom: 1px solid #000000
}

.PnlCheckoutheader_Fixed {
    width: 100%;
    position: fixed;
    top: 40px;
    z-index: 9999;
    background-color: #ffffff
}

#PnlCheckoutheader_Holding {
    width: 100%;
    box-sizing: border-box
}

.PnlCheckoutheader_Holding_Fixed {
    height: 56px;
    width:100%;
    box-sizing:border-box
}
