button { text-decoration:none; }
/* GLOBAL ---------- CORE ---------- BUTTON */
.oddButton { position: relative; overflow: hidden; display: flex; align-items: center; justify-content:center; font-size: .95rem; font-weight: 500; letter-spacing: .015rem; padding: .45rem 1rem; text-transform: capitalize; border-radius: 3px; cursor: pointer; }
.oddButton:disabled { cursor:not-allowed; }

/* BUTTON: Subtle Border Color */
.oddButton.primary { background-color: #086eea; color: #FFF; text-shadow: 0 1px 1px hsla(200, 10%, 4%, 0.3); }
.oddButton.primary:hover { background-color: #0a73f3; }
 
/* BUTTON: Subtle Border Color */
.oddButton.primary { border: 1px solid #006bd6; box-shadow: hsla(210, 100%, 60%, 0.5) 0 1px 0 inset, hsla(210, 100%, 30%, 0.4) 0 -1px 0 1px inset, hsla(200, 10%, 4%, 0.1) 0 2px 4px 0; }
.oddButton.primary svg { fill: #fff; }
.oddButton.primary:hover { border: 1px solid #076be5; }

.oddButton.primary:disabled { background-color: #f9f9f9; color: #777; box-shadow: none; }
.oddButton.primary:disabled { border: 1px solid #ccc; }
.oddButton.primary:disabled:hover { background-color: #ddd;}


/* BUTTON: Subtle Drop Shadow */
.oddButton.secondary { box-shadow:0 0 0 1px #0a428718; }

.oddButton.secondary { background-color: rgb(246, 247, 248, .6); }
.oddButton.secondary { color: #444; border: 1px solid #e5e5ec; }
.oddButton.secondary:hover { color: #222; border: 1px solid #b9b8bd; }
.oddButton.secondary:disabled { background-color: #f9f9f9; border: 1px solid #e5e5ec; color: #777; box-shadow: none; }

.odd-product__actions .oddButton,.oddButton.download { gap: .5rem;}
.oddButton i { display: flex;}
.oddButton.secondary i svg { fill: #086eea;}

/* DEMO: Stage and Demo */
.oddStage,.oddDemo { background-color: #f5f7f9; }
.oddDemo { width: 100%; max-width: 1024px; height:100%; max-height: 768px; margin: auto; position: relative; display: flex; align-items: center; justify-content: center; }
.oddPanel { background-color: #FFFFFF; padding: 1rem; max-width: 88%; }