/*!
Theme Name: CSY Loyalty App
Theme URI: https://www.csy.co.uk/
Author: CSY Retail Systems
Author URI: https://www.csy.co.uk/
Description: Loyalty app theme by CSY Retail Systems
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: csy-loyalty-app
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:16px}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:700;}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}


@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./fonts/material-icons-outlined.woff2") format("woff2");
}

@font-face {
  font-family: 'Roboto500';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/roboto500.woff2") format("woff2");
}
@font-face {
  font-family: 'Roboto300';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/roboto300.woff2") format("woff2");
}
@font-face {
    font-family: 'shannonbold';
	    font-weight: normal;
    font-style: normal;
    src: url('./fonts/shannon_bold-webfont.woff2') format('woff2'),
         url('./fonts/shannon_bold-webfont.woff') format('woff');

}
.material-icons {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 28px;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

/*............ root .............
.................................*/

:root { --body:#333;--primary: #004a2b; --light:#fff; --border:#cacaca; --active:#6cc559; --mm-min-size: 480px; --mm-size: 56svh; --mm-max-size:calc(100vh - 100px); 
	
/*........... core ................
.................................*/
* { -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;}
::selection {background: transparent;}
::-moz-selection {background: transparent;}
::-webkit-selection {background: transparent;}
*, :after, :before {box-sizing :border-box;}
:focus,:active {outline:none!important;}
html { -webkit-text-size-adjust: none; touch-action: pan-y; -webkit-touch-callout:none;  }
body {height:100svh; line-height:1.4; background:var(--light); background: linear-gradient(180deg, rgba(255,255,255,1) 40%, rgba(0,0,0,.05)); 
color:var(--body); letter-spacing:1px;font-family: var(--font-body); font-weight:300; font-size:16px; background-repeat: no-repeat;background-attachment: fixed; user-select:none!important;
padding-top:env(safe-area-inset-*);
	}
--menu-overlay-visibility-delay: 0.4s;--menu--overlay-opacity-delay: 0s; --font-body:Roboto300, sans-serif; --font-header: shannonbold, sans-serif; --heading-1:22px; --heading-2:18px;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-header); font-weight:500;margin:0 0 1em; color:var(--primary);}
h2, h3.gform_title { font-size:var(--heading-1);margin:1em 0;}
h3 {font-size:var(--heading-2); }
a, a:active, a:hover, a:focus, button:focus {user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;}
a, button, .button, .close {cursor:pointer; }
a, a:not(.button):hover,  a:not(.button):focus { color:var(--active); text-decoration:none;}
.app-content p {margin: 0 0 1em;}
.screen-reader-text {display:none!important; }
.app-link a {font-family:var(--font-header); font-weight:500;}

.csy-app {height:calc(100svh - 100px); min-height:100%; will-change:auto; transform-style: flat; transition:all 0.4s ease; padding-top: env(safe-area-inset-top)!important;}
.app-main {text-align:center; width: 100%; scroll-margin-top: 100px;}
.app-container {max-width:750px;margin:0 auto;}
.app-container-inner {padding:0 25px;}
.page-welcome .app-container-inner {padding:0 20px;}
.app-content {padding:5% 0 150px;}
.app-content:before, .app-content:after {clear:both;content: ""; display: table;}
.align-left {text-align:left;}
.align-right {text-align:right;}


/*.......... buttons .............
.................................*/

a.link-underline, a.link-underline:hover {text-decoration:underline; text-underline-offset:2px; font-family:var(--font-header);}
.button { margin-bottom:16px; text-shadow:1px 1px 1px rgba(0,0,0,0.2); box-shadow:0px 2px 1px rgba(0, 0, 0, 0.7); 
font-family:var(--font-header);letter-spacing: 2px; display:inline-block; width:100%; max-width:276px;  border-radius:8px;
 padding: 12px 18px; border:none; position:relative;line-height:1; background-color:var(--active); color:var(--light);}

button.button:after, a.button:after {content:""; display: block;height: 100%; width: 100%; position: absolute; top: 0; left: 0; border-radius: 8px;}
button.button > span, a.button > span	{z-index: 1; position: relative;}


button.refresh-points.button.updating {background-color:var(--active);}
button.refresh-points.button.updating:after {width:100%; animation: progress 2s linear;border-radius:0;
background: linear-gradient(-45deg, rgba(0,0,0,0.1)40%, rgba(255,255,255,0.1));}
@keyframes progress { 
	0% {
		width: 0%;
	  
	}
	100% {
		width: 100%;
	}
}
button.refresh-points.button:before {content:"Refresh"; z-index: 1; position: relative; }
button.refresh-points.button.updating:before {content:"Syncing";}


/*.......... header ..............
.................................*/


.app-header { background: var(--active); color:var(--primary);position:sticky; width:100%; top:0; z-index:10;padding-top: env(safe-area-inset-top)!important;} 
.app-header-inner {padding:0 25px;display:flex; justify-content:space-between;height:100px;align-items: center;}
.app-title h1 {margin:0; font-size:var(--heading-2); display:none;}
.app-title a {display:flex;pointer-events:none!important;align-items:center;}
.app-title img {max-width:120px; max-height:47px; margin-left:-5px;}
.app-nav-button {visibility:visible; height: 55px; width: 55px; border-radius: 50%; display: flex; justify-content: center; background-color: rgba(255, 255, 255, 0.2);}
.menu-toggle{background:transparent;border:none;color:#00492c;line-height:1;letter-spacing:1px;font-weight: 700 !important;}
button .menu-icon:before, button .menu-icon:after {display:block;margin:0;font-size:12px;font-weight: 700 !important;}
button .menu-icon:before{content:"More";}
button .menu-icon:after {content:"...";line-height:0; font-size:24px; letter-spacing:2px;font-weight: 700 !important;margin:-2px -2px 0 0;}


/*...... app navigation ..........
.................................*/

.menu--menu { background-color:#fff; --mm-translate-horizontal: 0; --mm-translate-vertical: 0; overscroll-behavior:none;transition-duration: .4s; 
transition-timing-function: ease;position:abolute;left:0;right:0;bottom:0;top:0;}
.menu--offcanvas {position: fixed;z-index: 0;}
.menu-overlay {display: block; position: absolute;bottom: 100%; top: 0;right: 0;left: 0; z-index: 20;opacity: 0; background: rgba(0,0,0,.5);
transition: bottom 0s ease var(--menu--overlay-visibility-delay),width .4s ease,opacity .4s ease var(--menu--overlay-opacity-delay),transform .4s ease,-webkit-transform .4s ease;}
.menu--wrapper--opened .menu-overlay {--menu--overlay-visibility-delay: 0s;--menu--overlay-opacity-delay: 0s; bottom: 0; opacity: .6; }
.menu--wrapper {overflow-x: hidden; position: relative;}
.menu--wrapper--opened {overflow:hidden;}
.menu--wrapper--opened .app-nav-button {visibility:hidden;}
.menu--bottom ul{list-style:none;text-align:center;margin:0; padding:0;}
.menu--bottom .menu-loyalty-points {font-family:var(--font-header);; font-size:48px; font-weight:700;margin-bottom:5px;}

.menu--wrapper--opened .csy-app {transform: scale(0.9); transform-origin:center;box-shadow:0 0 0 100px rgba(0,0,0,.2);position:fixed; width:100%; top:0; fliter:blur(5px); -webkit-filter: blur(5px); opacity:0.5;}
.menu--wrapper--opened .app-header {box-shadow:none;}
.menu--bottom {top: auto; width: 100%; height: clamp(var(--mm-min-size),var(--mm-size),var(--mm-max-size)); --mm-translate-vertical: 100%; z-index: 40; 
transform: translate3d(var(--mm-translate-horizontal),var(--mm-translate-vertical),0); transition-property: transform;}
	
.menu--bottom--opened {  transform: translate3d(0,0,0); }

.menu-loyalty-points-refresh span {display:block;}
.menu-loyalty-points-refresh button { width:280px; }
.refresh-points.button.updating {color:var(--primary);}

.app-navigation.toggled {display:block;}


/*......... handheld nav ..........
.................................*/

.handheld-navigation ul {margin:0; padding:0;}
.handheld-navigation ul li{float:left; width:20%;list-style:none; display: flex;justify-content: center; height: 100px; align-items: center;}
.handheld-navigation ul li a {color:var(--primary); margin-top: -15px; font-size: 12px; display: flex;align-items: center; flex-direction: column; padding: 16px;line-height: 1.2; font-weight:600;}
.handheld-navigation ul li.current-menu-item a i{color:var(--active);}
.offcanvastop { display:flex; justify-content:right; padding:10px 15px; border-bottom:1px solid var(--border); margin-bottom:16px;}
button.menu-close {background:transparent;border:none;line-height:1; font-size:14px; display:flex; align-items:center;color:var(--body);}
.menu-loyalty-points-refresh .last-updated-points-at { margin-bottom:16px; font-family:var(--font-header);}
.menu-loyalty-points-refresh .csy_clear_both_block { margin-bottom:5px;}
.menu-balance-text { line-height:1;}

/* Define a transition duration during page visits */
html.is-changing .transition-fade {
  transition: opacity 0.2s;
  opacity: 1;
}
/* Define the styles for the unloaded pages */
html.is-animating .transition-fade {
  opacity: 0;
}


/*............ card ..............
.................................*/

.csy-loyalty-card-container {padding-top:16px; }
.card-font {font-family: monospace; text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;color: #fff; opacity: 0.8;letter-spacing:2px;font-weight: 400; font-size:16px; }

/*.......... footer ..............
.................................*/

.app-footer {position: fixed; bottom: 0;width: 100%;background-color:#fff;height: 100px; border-top:1px solid var(--border); z-index:10;}
.csy-loyalty-card {padding:5% 6%;background-image:url(/wp-content/uploads/card-background-sf.png); background-size:cover; aspect-ratio: 4/2.5; 
border-radius:16px; max-width:550px; margin:0 auto; box-shadow:0 20px 27px rgba(0, 0, 0, 0.5); margin-bottom:50px;}
.card-bottom {display:flex; justify-content:space-between;}
.csy-loyalty-card span, .csy-loyalty-card small {color:#fff; display:block; text-transform:capitalize!important;}
.csy-loyalty-card small {margin-bottom:5px;}
.csy-loyalty-card svg { width:100%!important; height:auto!important; margin:3% 0;}
.csy-update-points-value .cardnumber:before {content:"\00A3"; }
.icon-spin {animation: iconSpin 0.4s steps(8) infinite;}

@keyframes iconSpin {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(1turn);
}

}

@keyframes menuIn {
	0% {
		height: auto;
	  
	}
	100% {
		height: 100%;
	}
}

@media (min-width: 470px){
.card-font { font-size:20px;}
.csy-loyalty-card {padding:5%}
}




/*....... wallet buttons .........
................................*/

.os_Android .dwnld_lnk-apple,
.os_iOS .dwnld_lnk-android {display: none;}
.addtowallet img {width:280px;}
html:not(.os_Android):not(.os_iOS) .addtowallet {display:none;}


/*....... transactions page .........
...................................*/

input[name='panel'] {
  display: none;
}

label.csy-transaction-batch-month {font-size:var(--heading-2); text-align:left;padding:16px 0;cursor: pointer;display: 
block;width: 100%; border-bottom:1px solid var(--border); font-family: var(--font-header);}
.csy-transaction-wrapper {display:table;width:100%;}
.csy-transactions-text {display:table-cell; padding:20px 0;}
.csy-transactions-text.left-text { text-align:left;}
.csy-transactions-text.right-text { text-align:right;}
.csy-transaction-balance {font-family:var(--font-header);}
.csy-transaction-title h3 {font-size:16px;margin:0;}
.csy-transaction-title h3[title="Purchase"], .csy-loyalty-points.csy-loyalty-positive {color:green; }
.csy-transaction-title h3[title="Return"], .csy-loyalty-points.csy-loyalty-negative {color:red; }
.csy-transaction-loyalty .csy-loyalty-points {font-weight:700; }
.collapsible { display: block;width: 100%; height: 0;}
.collapsible .csy-grid:not(:first-of-type) {border-top:1px dashed var(--border);}

input[name='panel'] + label + .collapsible {
  overflow: hidden;

}

input[name='panel']:checked + label + .collapsible {
 height:auto;
  
}
label.csy-transaction-batch-month i {float:right;font-size:18px;}
input[name='panel']:checked + label.csy-transaction-batch-month i {transform:rotate(90deg);}

.csy-batch .csy-grid:last-of-type .csy-transaction-wrapper {border-bottom:none;}
.csy-batch .csy-grid:first-of-type .csy-transaction-wrapper {border-top:none;}


/*......... news page ............
................................*/
.feature-image img {margin-bottom:1.5rem; width:100%!important; height:auto!important;}
.csy_single_blog .app-content {padding-bottom:0;}
.csy_single_blog p {text-align:justify; }
.csy-blog-container {padding-top:15px;}
.csy-blog-container .csy-grid {text-align:justify; margin-bottom:15px; border-bottom: 1px solid var(--border); padding-bottom:16px;}
.csy-blog-container .csy-grid:last-child { border-bottom:none;}
.csy_single_blog .cat-links {display:none;}
.csy-blog-title h3 {margin:0;line-height:1.6;}
.csy-blog-date {margin-bottom:16px;}
.csy-blog-readmore { margin-top:8px;display: flex;justify-content: end;}
.csy-blog-readmore span {display:flex;line-height:24px; font-size:14px;}
.csy-blog-readmore i {font-size:24px; margin-left: 5px; }
.post-navigation { padding:32px 0 150px;}
.post-navigation  .nav-links {display:flex; justify-content:space-between; }
.nav-links i { font-size:24px; }
.nav-previous a, .nav-next a {display:flex; align-items:center; }
.nav-previous .nav-title { margin-left:10px;}
.nav-next .nav-title { margin-right:10px;}


/*.......... offers page ...........
..................................*/

.csy-offer-text { padding:16px 0; border-bottom: 1px solid var(--border);}
.csy-offer-text h3 {font-size:var(--heading-2); margin:0; color: var(--body); }
.csy-offer-title { display:flex; justify-content:space-between;align-items: center;}
.csy-offer-title i { font-size:18px;}

/* offers single */
.csy-offer-barcode svg {width:100%;}


/*.......... account page ...........
...................................*/

.csy-account-details dl {margin:0; display:block; display: grid; grid-template-columns: repeat(2, 1fr);}
.csy-account-details dl dt, .csy-account-details dl dd {padding: 16px 0;display:inline-block; margin:0; border-bottom: 1px solid var(--border); }
.csy-account-details dl dt {text-align:left; font-family: var(--font-header);}
.csy-account-details dl dd { text-align:right;  }
.csy-account-buttons {margin-top:32px;display:flex; justify-content:space-between;}
.csy-account-buttons .button { margin:0 16px;}
.csy-app-inner { position:relative;}

/* ........ modal ........ */
dialog.modal {width:90%; max-width:700px; border:none; padding:0;box-shadow: 0 0 8px var(--body);}
dialog.modal .content { padding:2em 1em 1em;}
dialog.modal::backdrop {background: rgba(0,0,0,.5); }
dialog.modal .modal-header {height:50px;border-bottom:1px solid var(--border);display:flex;justify-content:flex-end; align-items:center; padding: 0 1em; }
[data-modal] { animation:modalIn 0.4s forwards ;}
[data-close-modal] {display: flex; align-items: center; font-size:14px;}
	
@keyframes modalIn {
    0% {
        opacity: 0;	
    }
	 100% {
        opacity: 1;
     }
}


/*......... intro page ............
.................................*/


body.page-template-page-forms- .app-header, body.page-template-page-forms- .app-footer {display:none; } 
body.page-template-page-forms- .csy-app {background-color:var(--light); display:flex; align-items:center;} 
.app-intro-message h1 { font-size:36px; font-weight:700; letter-spacing:-1px;margin:0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); line-height:1;}
.app-intro-buttons { opacity:0; padding-top:16px; animation:fadeIntroButtons ease 0.4s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-delay:1.4s;}
.app-intro-buttons a {font-size:18px;}
.app-intro-buttons  span { padding:0 12px; }
body.page-account-check .app-intro-buttons span { visibility:hidden;}

@keyframes fadeIntroButtons {
    0% {
        opacity: 0;
		transform: translateY(16px);
		
    }
    100% {
        opacity: 1;
		transform: translateY(0);
     }
}

body.page-landing .back-button-container, body.page-password-reset .back-button-container {display:none; } 
.back-button-container { display:flex; justify-content:center; position:fixed; border-top:1px solid var(--border);
padding: 15px 25px; width:100%;height:80px;animation:fadeInBack ease 0.4s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-delay:1.8s; z-index:10; background-color:var(--light);}
body.page-template-page-forms- .back-button-container {bottom:-80px; } 
 body:not(.page-account-check) .back-button-container { animation-delay:0.4s;}
.back-button {line-height: 1;font-size: 14px; color:var(--body); display: flex; align-items: center;}
.back-button:hover {color:var(--body);}
@keyframes fadeInBack {
    0% {
		transform: translateY(0);
    }
    100% {
		transform: translateY(-80px);
     }
}




.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: var(--primary);
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  pointer-events: none;
}

html.is-changing .page-template-page-forms- .transition-overlay {
  transition: transform 400ms ease-in-out;
  opacity: 1;
}

html.is-animating .page-template-page-forms- .transition-overlay  {
  transform: translate3d(0, 0, 0);
}

html.is-rendering .page-template-page-forms- .transition-overlay {
  transform: translate3d(-100%,0, 0);
}




/*............ forms ..............
.................................*/

.gform_wrapper  ul { margin:0; padding:0;}
.gform_fields li { list-style:none; display: list-item;padding-top:16px;}
.gform_fields > li:first-of-type { padding-top:0; }
.gform_fields label { text-align:left; font-family:var(--font-header); font-weight:500;font-size:inherit; display:block;margin-bottom:6px;font-size:75%; line-height:1;}
.gfield_checkbox label { font-size:inherit;}
.gfield_checkbox li { padding-top:0;}
label.gfield_label_before_complex, .gfield--type-captcha label{ display:none;}
.form-details { text-align:center; padding-left:5%; padding-right:5%;}
.gform_legacy_markup_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file])
{font-family: inherit;font-size: inherit;letter-spacing: inherit; padding: 8px; width:100%;}
.gform_wrapper .top_label li.gfield.gf_left_half, .gform_wrapper .top_label li.gfield.gf_right_half 
{ display: inline-block; float: none; padding-right: 16px; vertical-align: top; width: 50%;line-height:1;}
.gform_wrapper .top_label li.gfield.gf_left_half {padding-right:8px;}
.gform_wrapper .top_label li.gfield.gf_right_half {padding-left: 8px; padding-right:0;text-align:right;}
.gform_wrapper .top_label li.gfield.gf_left_half li {display:flex; justify-content: start;}
.gform_wrapper .top_label li.gfield.gf_left_half li label { margin:0 0 0 6px;}
.ginput_container_checkbox li {margin-top:0;}
.gform_legacy_markup_wrapper .gform_footer input.button, .gform_legacy_markup_wrapper .gform_footer input[type=submit], .gform_legacy_markup_wrapper .gform_page_footer input.button, .gform_legacy_markup_wrapper .gform_page_footer input[type=submit] 
{max-width:100%;} 
#input_8_5 { text-transform:capitalize!important;}
h2.gform_submission_error.hide_summary, .validation_message {color:#bc4444;margin-bottom: 0; font-size: 80%; text-align: center;font-family: var(--font-header);}
.validation_message {margin-top:3px; text-align:left; }
.gform_footer {margin-top:32px;}
.gfield_required span { color:var(--primary); margin-left:2px; font-size:16px;vertical-align:middle;}
.gform_fields li.gfield_visibility_hidden { display:none;}
.gf_readonly input {user-select:none!important; cursor: not-allowed;}
.gform_fields li.gfield--input-type-adminonly_hidden, li.gform_hidden {display:none; }
.form-wrap  {position:relative; }
.form-wrap img.gform_ajax_spinner {display:none!important;}
.spinner {
  animation: rotate 0.8s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -80px 0 0 -60px;
  width: 120px;
  height: 120px; 
}

@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}


/*...... delete account ..........
.................................*/

p:empty { display:none; }
#plugin_delete_me_shortcode_form  label{font-family:var(--font-header); display:block; }
#plugin_delete_me_shortcode_form input {padding:8px; width:276px;}
#plugin_delete_me_shortcode_form input[value="Confirm Deletion"] { text-shadow:1px 1px 1px rgba(0,0,0,0.2); box-shadow:0px 2px 1px rgba(0, 0, 0, 0.7); 
font-family:var(--font-header);letter-spacing: 2px; display:inline-block; width:100%; max-width:276px;  border-radius:8px;
 padding: 12px 18px; border:none; position:relative;line-height:1; background-color:var(--primary); color:var(--light);}


.sk-circle {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative
}

.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}

.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background: #333;
border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both
}

.sk-circle .sk-circle2 {
transform: rotate(30deg)
}

.sk-circle .sk-circle3 {
transform: rotate(60deg)
}

.sk-circle .sk-circle4 {
transform: rotate(90deg)
}
.sk-circle .sk-circle5 {
transform: rotate(120deg)
}

.sk-circle .sk-circle6 {
transform: rotate(150deg)
}

.sk-circle .sk-circle7 {
transform: rotate(180deg)
}

.sk-circle .sk-circle8 {
transform: rotate(210deg)
}

.sk-circle .sk-circle9 {
transform: rotate(240deg)
}

.sk-circle .sk-circle10 {
transform: rotate(270deg)
}

.sk-circle .sk-circle11 {
transform: rotate(300deg)
}

.sk-circle .sk-circle12 {
transform: rotate(330deg)
}

.sk-circle .sk-circle2:before {
animation-delay: -1.1s
}

.sk-circle .sk-circle3:before {
animation-delay: -1s
}

.sk-circle .sk-circle4:before {
animation-delay: -0.9s
}

.sk-circle .sk-circle5:before {
animation-delay: -0.8s
}

.sk-circle .sk-circle6:before {
animation-delay: -0.7s
}

.sk-circle .sk-circle7:before {
animation-delay: -0.6s
}

.sk-circle .sk-circle8:before {
animation-delay: -0.5s
}

.sk-circle .sk-circle9:before {
animation-delay: -0.4s
}

.sk-circle .sk-circle10:before {
animation-delay: -0.3s
}

.sk-circle .sk-circle11:before {
animation-delay: -0.2s
}

.sk-circle .sk-circle12:before {
animation-delay: -0.1s
}

@-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100% {
transform: scale(0)
} 40% {
transform: scale(1)
}
}

@keyframes sk-circleBounceDelay {
0%, 80%, 100% {
transform: scale(0)
} 40% {
transform: scale(1)
}
}

/* disable edit */
.edit-link, .post-edit-link { display: none!important; }
.csy-account-sign-out.link-underline {display:none;}


/* coffee card */

.loyalty-card{width:100%;padding:20px;background-color:#f2eddb;border-radius:10px;text-align:center;font-family:serif;margin:20px auto;aspect-ratio:5/3}.loyalty-card h3{font-size:1.6em;font-family:serif;margin-bottom:10px}.loyalty-card p{margin-top:10px}.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-top:15px}.stamp{width:70%;height:100%;border:2px solid #000;border-radius:50%;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:1.2rem;aspect-ratio:1;place-self:center}.stamp img{width:75%}.filled{background-color:gold}.loyalty-message{display:flex;align-items:center;justify-content:center}.loyalty-message img{margin-right:10px}