html, body { font-family: Sans-Serif; margin: 0; padding: 0; height: 100%; } input[type=checkbox], input[type=radio] { transform: scale(1.2); font-size: 1em; } _::-webkit-full-page-media, _:future, :root input[type=checkbox], :root input[type=radio] { transform: none; font-size: 1.2em; width: 1em; } .block { background: rgba(255, 200, 200, 0.7); border: 2px solid #f00; text-align: center; } .btn { border: 0.07em solid #fff; cursor: pointer; padding: 0.5em 0.8em; user-select: none; -webkit-user-select: none; opacity: 0.7; } .btn:hover { opacity: 1; } .btn-disabled { cursor: default; opacity: 0.3 !important; } .btn2 { display: inline-block; border: 0.07em solid #fff; border-radius: 0.4em; cursor: pointer; padding: 0.5em 0.8em; user-select: none; -webkit-user-select: none; opacity: 0.9; text-decoration: none; } .btn2:hover { opacity: 1; } .ccw { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform-origin: top left; -webkit-transform-origin: top left; } .fill { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .hoverlink a { text-decoration: none; } .hoverlink a:hover { text-decoration: underline; } .iconbigger { position: relative; font-size: 1.5em; top: 0.15em; display: inline-block; margin: -0.5em 0; } .nosel { user-select: none; -webkit-user-select: none; } .cart-team .member .outarea { text-align: center; color: red; font-size: 0.7em; font-weight: bold; } .cart-team .member.warn { background: #fff8e0; } .picbox { position: relative; overflow: hidden; transform: translate3d(0, 0, 1px); } .picbox img { position: absolute; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .popin-container.blackout { background: rgba(0, 0, 0, 0.85); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; padding: 0.4em; } .popin-container .popin-close { color: #ddd; cursor: pointer; padding: 0.1em; position: absolute; top: 0.5em; right: 0.5em; text-align: center; z-index: 10; } .popin-container .popin-close:hover { border-color: #fff; color: #fff; } .popin-container .popin-content { background: #222; border: 1px solid #ccc; width: 100%; height: 100%; } .popin-container iframe.popin-content { background: #fff; } .CardElement, .StripeElement { background-color: #fff; height: 24px; max-width: 440px; padding: 10px 12px; border-radius: 0; border: 1px solid #ddd; } .CardElement input, .StripeElement input { /*ignored by Stripe, Square, Clover (any that need the input style directly inserted during the creation of the object. We would have to get a bit smarter about which page is calling the object if the font is that important for the Cart. PT Sans is the default for all right now)*/ font-family: "Titillium Web", Verdana, sans-serif !important; } .CardElement select, .StripeElement select { padding: 0.25em 0.4em; } .CardElement.nameoncard, .StripeElement.nameoncard { margin-bottom: 0.25em; } .CardElement.nameoncard input, .StripeElement.nameoncard input { display: block; font-family: "Titillium Web", Verdana, sans-serif; font-size: 18px; border: 0; padding: 0; } .CardElement.nameoncard input:focus, .StripeElement.nameoncard input:focus { box-shadow: none; outline: none; } .CardElement.nameoncard input::placeholder, .StripeElement.nameoncard input::placeholder { color: #b8b4b0; opacity: 1; } .CardElement.qbexpirationdate, .StripeElement.qbexpirationdate, .CardElement.qbcardnumber, .StripeElement.qbcardnumber, .CardElement.qbcvc, .StripeElement.qbcvc, .CardElement.qbpostalcode, .StripeElement.qbpostalcode { margin: 0 0.4em 0.5em 0; display: inline-flex; } .CardElement.qbexpirationdate input, .StripeElement.qbexpirationdate input, .CardElement.qbcardnumber input, .StripeElement.qbcardnumber input, .CardElement.qbcvc input, .StripeElement.qbcvc input, .CardElement.qbpostalcode input, .StripeElement.qbpostalcode input { font-family: "Titillium Web", Verdana, sans-serif; font-size: 18px; border: 0; padding: 0; } .CardElement.qbexpirationdate input:focus, .StripeElement.qbexpirationdate input:focus, .CardElement.qbcardnumber input:focus, .StripeElement.qbcardnumber input:focus, .CardElement.qbcvc input:focus, .StripeElement.qbcvc input:focus, .CardElement.qbpostalcode input:focus, .StripeElement.qbpostalcode input:focus { box-shadow: none; outline: none; } .CardElement.qbexpirationdate input::placeholder, .StripeElement.qbexpirationdate input::placeholder, .CardElement.qbcardnumber input::placeholder, .StripeElement.qbcardnumber input::placeholder, .CardElement.qbcvc input::placeholder, .StripeElement.qbcvc input::placeholder, .CardElement.qbpostalcode input::placeholder, .StripeElement.qbpostalcode input::placeholder { color: #b8b4b0; opacity: 1; } .CardElement.qbcardnumber, .StripeElement.qbcardnumber { margin-bottom: 10px; } .CardElement.qbcardnumber input, .StripeElement.qbcardnumber input { width: 300px; } .CardElement.qbexpirationdate input, .StripeElement.qbexpirationdate input { width: 125px; } .CardElement.qbcvc input, .StripeElement.qbcvc input { width: 50px; } .CardElement.cloverexpirationdate, .StripeElement.cloverexpirationdate, .CardElement.clovercardnumber, .StripeElement.clovercardnumber, .CardElement.clovercvc, .StripeElement.clovercvc, .CardElement.cloverpostalcode, .StripeElement.cloverpostalcode { margin: 0.2em 0.2em 0.2em 0; display: inline-flex; /* input { font-family: "Titillium Web", Verdana, sans-serif; font-size: 18px; border: 0; padding: 0; &:focus { box-shadow: none; outline: none; } &::placeholder { color: #b8b4b0; opacity: 1; } }*/ } .CardElement.clovercardnumber, .StripeElement.clovercardnumber { display: block; width: 300px; } .CardElement.cloverexpirationdate, .StripeElement.cloverexpirationdate { width: 90px; } .CardElement.clovercvc, .StripeElement.clovercvc { width: 50px; } .CardElement.cloverpostalcode, .StripeElement.cloverpostalcode { width: 88px; } .CardElement--focus, .StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; } .CardElement--invalid, .StripeElement--invalid { border-color: #fa755a; } .CardElement--webkit-autofill, .StripeElement--webkit-autofill { background-color: #fefde5 !important; }