.button, input[type=button], input[type=submit]{transition:all 600ms ease; padding: 14px 30px; font-size:1rem; font-weight:600; text-decoration: none !important; text-align: center; display: inline-block; margin: 0 10px 0 0; box-sizing: border-box; cursor:pointer; border:0; border-radius:10px}
.button:hover, input[type=button]:hover, input[type=submit]:hover{text-decoration: none !important; color: #fff; background-color: var(--pink)}

/*
article .button{min-width:326px; max-width:326px}
*/
.button-navy{background: var(--navy) !important; color: #fff !important}
.button-navy:hover{background: var(--yellow) !important}

.button-pink{background-color: var(--pink) !important; color: #fff !important}
.button-pink:hover{background: var(--yellow) !important; color: var(--navy) !important}



.button-yellow{background: var(--yellow) !important}
.button-yellow:hover{background: #fff !important; color: var(--navy) !important}

.button-teal{background: var(--teal) !important}
.button-teal:hover{background: var(--navy) !important; color: #fff !important}

.button-black{background: #000 !important; color: #fff !important}

.button-grey{background: #ccc !important; color: #333 !important; cursor:not-allowed}
.button-grey:hover{background:#ccc !important; color:#333 !important}

.button-white{background: #fff; color: var(--navy) !important}
.button-white:hover{background: var(--yellow) !important; color: var(--navy) !important}

.button-outline-navy{background: #fff; color: var(--navy) !important; border:2px solid var(--navy) !important}
.button-outline-navy:hover{border-color:var(--navy) !important; background: var(--navy) !important; color:#fff !important}

.button-outline-pink{background: #fff; color: var(--pink) !important; border:2px solid var(--pink) !important}

.button-calendar{border:2px solid var(--navy); background-color:#fff; color: var(--navy); background-image: url("../img/icon-diary.svg"); background-repeat: no-repeat; background-position: left 9px top 9px; background-size:30px; padding-left: 60px}
.button-calendar:hover{color:var(--pink); border-color: var(--pink); background-color: #fff}

input[type=button], input[type=submit]{}

.social-twitter svg{transform:scale(0.5)}

.account-button{position: relative; margin-left: 15px}
.account-button img{width:24px; position: absolute; top:0px; left:-28px}
.cart-button img{width:18px; position: absolute; top:4px; left:-25px}

/* Legacy */
.gradpink{transition:all 600ms ease; padding: 5px 30px; font-size:1rem; font-weight:500; text-decoration: none; text-align: center; display: inline-block; margin: 0 10px 0 0; box-sizing: border-box; cursor:pointer; border:0;background-color: var(--pink) !important; color: #fff !important}
.gradpink:hover{background: var(--navy) !important}

.modal-buttons-flex{max-width: 500px; margin: 15px auto}
.modal-buttons-flex > div{width:100%; max-width: 50%}
.modal-buttons-flex .button{display:block}

.staff-remove-button{background-image: url("../img/icon-trash.svg"); background-position: left 5px center; background-size: contain; padding: 5px; color:var(--pink); max-width:110px; text-align: right; cursor: pointer}
.staff-remove-button:hover{opacity: 0.7}