@charset "utf-8";

._color-button { align-items: center; border: 0px; border-radius: 80px; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; gap: 8px; height: 48px; justify-content: center; padding: 0px 16px; transition: background-color 0.25s ease-in-out 0s, border-color 0.24s ease-in-out 0s; vertical-align: middle; }

._color-button.md { font-size: 16px; font-weight: 500; letter-spacing: 0.64px; line-height: 20px; }

._color-button.sm { font-size: 14px; font-weight: 500; letter-spacing: 0.56px; line-height: 18px; }

._color-button:active, ._color-button:hover:not(.hover-disable) { background-color: rgba(255, 255, 255, 0.3); }

._color-button[readonly] { cursor: auto; }

._color-button[readonly]:active, ._color-button[readonly]:hover:not(.hover-disable) { background-color: transparent; }

._color-button[disabled] { cursor: not-allowed; opacity: 0.35; pointer-events: none; }

._color-button.download, ._color-button.icon { backdrop-filter: blur(2px); background-color: rgba(255, 255, 255, 0.2); border-radius: 100vh; height: 48px; padding: 0px; width: 48px; }

._color-button.download i, ._color-button.icon i { font-size: 24px !important; }

._color-button.download i.icon-arrow_left_24.up, ._color-button.icon i.icon-arrow_left_24.up { transform: rotate(90deg); }

._color-button.primary { background-color: rgb(211, 0, 0); color: rgb(255, 255, 255); display: inline-flex; font-size: 16px; font-weight: 500; gap: 8px; height: 48px; line-height: 16px; padding: 0px 24px; }

._color-button.primary:hover:not(.hover-disable) { background-color: rgb(192, 0, 0); border: 0px; }

._color-button.primary i { color: rgb(255, 255, 255); font-size: 24px; }

._color-button.primary .svg-icon { flex: 0 0 auto; height: 24px; width: 24px; }

._color-button.download { background-color: rgb(211, 0, 0); border-radius: 56px; overflow: hidden; white-space: nowrap; }

._color-button.download > span { color: rgb(255, 255, 255); display: none; }

._color-button.download:hover:not(.hover-disable) { background-color: rgb(192, 0, 0); border: 0px; }

._color-button.download:active:not(.hover-disable) { background-color: rgb(150, 0, 0); }

._color-button.prev-next { border: 1px solid rgb(108, 108, 122); border-radius: 100%; height: 40px; padding: 0px; width: 40px; }

._color-button.prev-next .svg-icon { height: 20px; width: 20px; }

._color-button.prev-next .svg-icon path { stroke: rgb(212, 212, 212); }

._color-button.prev-next > span { color: rgb(212, 212, 212); display: none; font-size: 14px; font-weight: 400; letter-spacing: 0.42px; line-height: 22px; }

._color-button.prev-next:active, ._color-button.prev-next:hover:not(.hover-disable) { background-color: transparent; border: 1px solid rgb(255, 255, 255); }

._color-button.prev-next:active > span, ._color-button.prev-next:hover:not(.hover-disable) > span { color: rgb(255, 255, 255); }

._color-button.prev-next[disabled] { border: 1px solid rgb(82, 82, 82); opacity: 1; }

._color-button.prev-next[disabled] > span { color: rgb(82, 82, 82); }

._color-button.prev-next[disabled] .svg-icon path { stroke: rgb(82, 82, 82); }

@media screen and (min-width: 768px) {
  ._color-button.prev-next { border-radius: 16px; gap: 4px; height: 32px; min-width: 128px; padding: 0px; width: auto; }
  ._color-button.prev-next ._color-button.download, ._color-button.prev-next .icon { color: rgb(255, 255, 255); font-size: 20px !important; }
  ._color-button.prev-next > span { display: inline-block; flex: 1 1 0%; }
  ._color-button.prev-next.btn-prev { padding: 0px 16px 0px 8px; }
  ._color-button.prev-next.btn-next { padding: 0px 8px 0px 16px; }
}