/* style.css */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: #EBFAF7;
  background: linear-gradient(133deg, #EBFAF7 0%, #fff 80%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-attachment: fixed;
}

@media (max-width:991px) {
  body {
    height: initial;
    padding: 0 0 45px 0;
  }
}

button:focus, a:focus {
  outline: #ff6600 3px dotted !important;
  border-radius: 10px;
}

header {
  width: 100%;
  /* box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1); */
  display: flex;
  justify-content: space-between;
  /* background-color: #EBFAF7; */
  /* border-bottom: #EBFAF7 5px solid; */
  padding: 1rem 1.5rem;
  background: linear-gradient(45deg, #fff 0%, #EBFAF7 80%);
}

@media (max-width:991px) {
  header {
    position: fixed;
    z-index: 11;
    width: 55px;
    padding: 0;
    height: 45px;
    justify-content: center;
  }

  header h1 {
    display: none
  }
}

.logo {
  display: flex;
  align-items: center;
  /* background-color: #fff; */
  padding-right: 2rem;
  border-radius: 0 30px 30px 0;
  color: #007C69;
}

@media (max-width:991px) {
  .logo {
    padding-right: 0;
  }
}

.logo h1 {
  font-size: 1.45rem;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: initial;
}

.logo span {
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

.logo img {
  width: auto;
  height: 36px;
  margin-right: 0.5rem;
}

@media (max-width:991px) {
  .logo img {
    margin-right: 0rem;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  align-items: center;
}

@media (max-width:991px) {
  nav ul {
    display: none;
  }
}

nav ul li {
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  color: #666;
  font-size: 0.8rem;
  /* display: block; */
  /* padding: 0.35rem 1.25rem; */
  letter-spacing: 1px;
  /* border-radius: 20px; */
}

nav ul li a:hover {
  color: #009d85;
}

nav ul li a svg {
  vertical-align: text-top;
}

.main {
  display: flex;
  min-height: calc(100vh - 166px);
  position: relative;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media (max-width:991px) {
  .main {
    justify-content: initial;
    min-height: initial;
  }
}

.tools h3,.tools .h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: bold;
  color: #666;
}

@media (max-width:991px) {
  .tools h3,.tools .h3 {
    display: none;
  }
}

.tools p {
  margin: 0;
  color: #666;
}

#editor {
  text-align: center;
  width: 100%;
  position: relative;
}

@media (max-width:991px) {
  #editor {
    padding-top: 45px;
  }
}

#stepsIndicator {
  display: flex;
  position: relative;
  height: 55px;
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);

}

@media (max-width:991px) {
  #stepsIndicator {
    position: fixed;
    z-index: 10;
    width: 100%;
    padding-left: 55px;
    height: 45px;
  }
}

.step {
  flex: 1;
  color: #009d85;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  letter-spacing: 1px;
  font-size: 1.125rem;
  font-weight: bold;
  z-index: 0;
  color: #fff;
  transition: all 0.75s;
}

@media (max-width:991px) {
  .step {
    flex: initial;
    padding: 0 2rem;
  }

  .step div {
    display: none;
    overflow: hidden;
    white-space: nowrap;
  }
}

@media (max-width:575px) {
  .step {
    flex: initial;
    padding: 0 0.5rem;
  }
}

.step::before {
  content: '';
  display: block;
  width: 100%;
  height: 55px;
  background-color: #009D85;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: all 0.75s;
  z-index: -1;
}

@media (max-width:991px) {
  .step::before {
    height: 45px;
  }
}

/* .step::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  top: 0px;
  right: -30px;
  border-style: solid;
  border-width: 30px 0 30px 30px;
  transition: all 0.3s;
  border-color: transparent transparent transparent #666;
} */

/* .step.active::after {
  border-color: transparent transparent transparent #666;
}
 */
.step.active {
  position: relative;
  color: #fff;
  border-radius: 0 30px 30px 0;
  overflow: hidden;
}

@media (max-width:991px) {
  .step.active {
    flex: 1;
  }

  .step.active div {
    display: block;
  }

  .step.active span {
    margin-right: 0.5rem;
  }
}

.step:last-child.active {
  border-radius: 0;
}

.step.active~.step {
  color: #bbb;
}

.step.active~.step::before {
  width: 0%;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 0 30px 30px 0;
}

/* .step.active~.step::after {
  content:none;
} */

.step span {
  display: inline-flex;
  margin-right: 0.5rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ebfaf7;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-family: math;
  color: #009d85;
}

@media (max-width:991px) {
  .step span {
    margin-right: 0;
  }
}

.step.active~.step span {
  color: #fff;
  background-color: #bbb;
}

.tools {
  text-align: left;
  /* background-color: #EBFAF7; */
  padding: 2rem 2rem 5.5rem 0.5rem;
  width: 30%;
}

@media (max-width:991px) {
  .tools {
    width: 100%;
    padding: 0;
    position: fixed;
    /* height: 150px; */
    bottom: 50px;
    /* background-color: #ffffff; */
    /* border-top: #85c7bd 1px solid; */
    /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); */
  }
}

.tools button {
  border: none;
  outline: none;
}

#canvasWrapper {
  position: relative;
  overflow: auto;

  /* 確保有固定高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(70% - 94px);
}

@media (max-width:991px) {
  #canvasWrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 5rem 2rem 1rem 2rem;
    /* height: 50vh; */
  }
}

#canvasWrapper:focus-within {
  outline: #ff6600 3px dotted;
}

canvas {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px
}

#stepControls {
  display: flex;
  /* justify-content: flex-end; */
  width: calc(30% - 2.5rem);
  position: absolute;
  bottom: 0rem;
  right: 2rem;
  margin-bottom: 2rem;
}

@media (max-width:991px) {
  #stepControls {
    width: calc(100% - 50px);
    position: fixed;
    right: 0px;
    margin-bottom: 0px;
    height: 50px;
    background-color: #ddd;
    z-index: 9;
    justify-content: flex-end;
    box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.2);
    margin-left: 50px;
  }
}

#stepControls button {
  /* color: #333; */
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 48%;
  font-weight: bold;
  font-size: 1.05rem;
  border-radius: 20px;
  max-width: 536px;
}

@media (max-width:991px) {
  #stepControls button {
    height: 50px;
    font-size: 1.125rem;
    border-radius: 0px;
    padding: 0;
    position: initial;
    width: initial;
    flex: 1;
    max-width: initial;
  }
}

.template-thumb {
  cursor: pointer;
  background-color: #666;
  border-radius: 6px;
  width: 100%;
}

.template-thumb:hover {
  border-color: #EBFAF7;
}

#templateOptions {
  max-width: 1920px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  margin: 0 auto;
}

@media (max-width:991px) {
  #templateOptions {
    padding: 1rem;
  }
}

@media (max-width:768px) {
  #templateOptions {
    padding: 0.5rem;
  }
}

#stickerOptions {
  border-radius: 10px;
  overflow: hidden;
}

@media (max-width:991px) {
  #stickerOptions {
    height: 20vh;
    transition: height 0.3s;
  }

  #stickerOptions.show {
    height: 40vh;
    transition: height 0.3s;
  }
}

#stickerOptions nav {}

@media (max-width:991px) {
  #stickerOptions nav {
    width: initial;
    text-align: initial;
    height: initial;
  }
}

#stickerOptions nav .nav {
  border-bottom: none;
}

@media (max-width:991px) {
  #stickerOptions nav .nav {
    /* flex-direction: row; */
    /* height: initial; */
  }
}

#stickerOptions button {
  border-radius: 10px;
  border: none;
  /* flex: 1; */
  background-color: #ddd;
  color: #333;
  margin: 3px;
  line-height: 1.3;
  padding: 8px 14px;
  /* box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.2) inset; */
}

@media (max-width:991px) {
  #stickerOptions button {
    /* width: initial; */
    border-radius: 0;
    margin: 0;
    padding: 10px 15px;
    flex: 1;
  }
}

#stickerOptions button:hover {
  background-color: #009d85;
  color: #fff;
}

#stickerOptions button:not(.stickerItem).active, #stickerOptions button:not(.stickerItem):focus {
  background-color: #005bac;
  box-shadow: none;
  color: #fff;
  border-radius: 10px;
}

@media (max-width:991px) {
  #stickerOptions button:not(.stickerItem).active, #stickerOptions button:not(.stickerItem):focus {
    border-radius: 0px;
  }
}

#stickerOptions button.mobi-close {
  display: none;
  width: 100%;
  height: 26px;
  padding: 0;
  background-color: #686666 !important;
  color: #fff;
  border-radius: 20px 20px 0 0;
}

#stickerOptions button.mobi-close:before {
  content: '';
  display: block;
  width: 100%;
  height: 26px;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M7.776 5.553a.5.5 0 0 1 .448 0l6 3a.5.5 0 1 1-.448.894L8 6.56 2.224 9.447a.5.5 0 1 1-.448-.894z'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
}

#stickerOptions button.mobi-close.active:before {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.553 6.776a.5.5 0 0 1 .67-.223L8 9.44l5.776-2.888a.5.5 0 1 1 .448.894l-6 3a.5.5 0 0 1-.448 0l-6-3a.5.5 0 0 1-.223-.67'/></svg>");
}

@media (max-width:991px) {
  #stickerOptions button.mobi-close {
    display: block;
  }
}

#stickerOptions .tab-content {
  padding: 0.5rem;
  background-color: #f1f1f1;
  border-radius: 10px;
  height: 45vh;
}

#stickerOptions .tab-content .tab-pane {
  height: 100%;
  overflow-y: auto
}

@media (max-width:991px) {
  #stickerOptions .tab-content {
    border-radius: 0px;
    padding: 0;
  }

  #stickerOptions .tab-content .tab-pane {
    height: calc(20vh - 68px);
  }

  #stickerOptions.show .tab-content .tab-pane {
    height: calc(40vh - 68px);
  }
}

#stickerOptions .stickerItem {
  width: calc(100% / 5 - 10px);
  height: 70px;
  /* margin: 0.5rem; */
  border-radius: 10px;
  padding: 0.5rem;
  display: inline-block;
  background-color: initial;
}

@media (min-width:1600px) {
  #stickerOptions .stickerItem {
    width: calc(100% / 6 - 10px);
  }
}

@media (max-width:991px) {
  #stickerOptions .stickerItem {
    width: calc(100% / 5 - 4px);
  }
}

#stickerOptions .stickerItem .template-thumb {
  background-color: initial;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

#stickerOptions .stickerItem.largeImg {
  text-align: center;
  height: 100px;
  width: calc(100% / 3 - 0.25rem);
}

#stickerOptions .stickerItem.largeImg .template-thumb {
  /* height: 70px; */
  /* max-width: 180px; */
}

/* @media (max-width:1623px) {
  #stickerOptions .stickerItem {
    width: 22%;
  }
}

@media (max-width:1440px) {
  #stickerOptions .stickerItem {
    width: 30%;
  }
} */

#stickerOptions .stickerItem:hover {
  background-color: #ddd;
}

.templateBlk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2.5rem;
}

@media (max-width:991px) {
  .templateBlk {
    margin-bottom: 0;
  }
}

.template {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / 5 - 3rem);
  margin: 1.5rem;
  flex-wrap: wrap;
}

@media (max-width:991px) {
  .template {
    width: calc(100% / 2 - 3rem);
  }
}

@media (max-width:768px) {
  .template {
    width: calc(100% / 2 - 2rem);
    margin: 1rem;
  }
}


.horizontal .template-item {
  aspect-ratio: 4/3;
}

.straight .template-item {
  aspect-ratio: 3/4;
  max-height: 300px;
}

@media (max-width:991px) {
  .straight .template-item {
    max-height: initial;
  }
}

.template-item {
  position: relative;
  cursor: pointer;
  border: none;
  background-color: initial;
  outline: none;
}

.template-item:before {
  content: '';
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: -5px;
  left: 0px;
  z-index: 9;
  color: #c3c3c3;
  font-weight: bold;
  font-size: larger;
  background-size: 40px auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="gray" viewBox="0 0 16 16"><path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/><path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54L1 12.5v-9a.5.5 0 0 1 .5-.5z"/></svg>');
}

.template.active {
  /* background-color: #ddd;
  border-radius: 10px; */
}

.template-item.active img {
  outline: #8AF1E0 8px solid;
  /* box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); */
}

.template .text {
  width: 100%;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  letter-spacing: 1px
}

.button-disabled {
  background-color: #005bac !important;
  color: white !important;
  cursor: not-allowed !important;
  opacity: 0.5;
}

footer {
  color: #666;
  text-align: center;
  padding: 0.75rem;
  font-size: 0.8rem;
  /* background-color: #d4f4ef; */
  letter-spacing: 1px;
  /* box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.1); */
}

@media (max-width:991px) {
  footer {
    display: none;
  }
}

#uploadImage {
  width: 100%;
  height: 150px;
  border-radius: 10px;
  border: #ddd 3px dashed;
  color: #666;
  /* background-color: rgb(0 40 75 / 50%); */
}

@media (max-width:991px) {
  #uploadImage {
    margin: 1rem;
    width: calc(100% - 2rem);
    height: 50px;
    /* padding: 10px; */
  }
}

#uploadImage svg {
  width: 65px;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0.8;
}

@media (max-width:991px) {
  #uploadImage svg {
    display: initial;
    width: 24px;
  }
}

.prevStep {
  background-color: #005bac;
  color: #fff;
  position: absolute;
  top: -2.5rem;
  left: 0px;
}

.prevStep:hover {
  background-color: #0a477e;
}


.nextStep {
  background-color: #258ce7;
  color: #fff;
  position: absolute;
  top: -2.5rem;
  right: 0px;
}

.nextStep:hover {
  background-color: #1c6eb7;
  color: #fff;
}


.editBlk {
  /* position: absolute;
  top: 1rem;
  right: 0rem; */
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  /* background-color: #EBFAF7; */
  border-radius: 30px;
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); */
}

@media (max-width:991px) {
  .editBlk {
    width: 100%;
    display: block;
    position: fixed;
    top: 40px;
  }
}

.editBlk button {
  font-size: 0.8rem;
  width: 70px;
  height: 70px;
  padding: 0;
  color: #333;
  border-radius: 50%;
  border: none;
  outline: none;
  margin: 0.25rem;
  background-color: #8AF1E0;
  border: #02e1bf 3px solid;
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); */
}

.editBlk button:hover {
  background-color: #009d85;
  color: #fff;
}

@media (max-width:991px) {
  .editBlk button {
    width: initial;
    height: initial;
    border-radius: 10px;
    padding: 4px 1rem;
    font-size: 1rem;
    max-height: 42px;
  }
}

.editBlk button svg {
  width: 26px;
  height: auto;
  display: block;
  margin: 0 auto 0.1rem auto;
}

@media (max-width:991px) {
  .editBlk button svg {
    display: initial;
    width: initial;
  }
}

#download, #previewDownload {
  width: 100%;
  height: 50px;
  border-radius: 30px;
  margin-top: 2rem;
  font-size: 1.25rem;
  font-weight: bold;
  background-color: #005bac;
  color: #fff;
}

#previewDownload {
  display: none;
}

@media (max-width:991px) {
  #download, #previewDownload {
    margin: 1rem;
    width: calc(100% - 2rem);
  }

  #download {
    display: none;
  }

  #previewDownload {
    display: block;
  }
}

#download:hover, #previewDownload:hover {
  background-color: #026BC8;
}

#download svg {
  width: 30px;
  height: 30px;
}

#previewDownload svg {
  width: 24px;
  height: 24px;
}

.modal .modal-content {
  padding: 0rem 2rem 1rem 2rem;
}

.modal h3,.modal .h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.75rem
}

.modal p {
  margin-bottom: 0;
  color: #666;
}

.modal .modal-content img {
  margin-bottom: 1rem;
  max-width: 200px;
}

.modal button {
  background-color: #8AF1E0;
  border-radius: 20px;
  border: none;
  outline: none;
  width: 150px;
  line-height: 36px;
  color: #333;
  margin: 1.5rem 0.25rem 0 0.25rem;
}

.modal button:hover {
  background-color: #009d85;
  color: #fff;
}

.modal button.cancel {
  background-color: #ddd;
}

.modal button.cancel:hover {
  background-color: #999999;
  color: #fff;
}

.modal button.modal-close {
  padding: 0;
  margin: 0;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: initial;
  line-height: 1;
  background-color: initial;
}

.modal button.modal-close svg {
  width: 24px;
  height: 24px;
}

.modal button.modal-close:hover svg {
  color: #009d85;
}

.description {
  margin-bottom: 1rem;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  border: #666 1px solid;
  position: relative;
}

@media (max-width:991px) {
  .description {
    position: absolute;
    bottom: -50px;
    left: 0;
    margin-bottom: 0;
    z-index: 15;
    border-radius: 0;
    border: 0;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  }

  .description-content {
    transition: all 0.3s;
    max-height: 0px;
    width: 100vw;
    /* position: absolute; */
    background-color: #fff;
    visibility: hidden;
    bottom: 0px;
    z-index: -1;
    opacity: 0;
  }

  .description-content.show {
    width: calc(100vw - 50px);
    background-color: #fff;
    max-height: 200px;
    visibility: visible;
    transition: all 0.3s;
    margin-bottom: 50px;
    opacity: 100%;
  }
}

.description .title {
  width: 36px;
  background-color: #666;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  /* line-height: 1.25; */
  /* font-weight: bold; */
  writing-mode: vertical-rl;
  letter-spacing: 3px;
  flex-shrink: 0;
  border-radius: 8px 0 0 8px;
  min-height: 92px;
  font-size: 0.9rem;
}

.description .title svg {
  display: none;
}

@media (max-width:991px) {
  .description .title {
    border-radius: 0;
    width: 50px;
    min-height: 50px;
    /* flex-direction: column; */
  }

  .description .title span {
    display: none
  }

  .description .title svg {
    display: block;
    width: 24px;
    height: 24px;
  }

  .description.active .title:after {
    content: '關閉';
    writing-mode: vertical-lr;
    margin-top: 10px
  }
}

.description ol {
  margin: 0 0 0 0.5rem;
  padding: 0.5rem 1rem 0.25rem 1rem;
}

.description ol li {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.description ol li span {
  display: inline-block;
  background-color: #fff5a4;
  margin: 0 5px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
}

.description svg {}

.description button {
  text-align: center;
  position: absolute;
  right: 0px;
  top: -40px;
  font-size: 0.8rem;
  padding: 0 1rem;
  line-height: 28px;
  border-radius: 20px;
  background-color: #009d85;
  color: #fff;
}

.description button:hover {
  background-color: #005bac;
}

.description button svg {
  vertical-align: text-bottom;
}

.description.active button {
  right: 0.5rem;
}

/* 橫向提示遮罩 */
#rotateWarning {
  display: none;
  /* 預設隱藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 24px;
  text-align: center;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

#deleteImage, #deleteSticker {
  background-color: #ddd;
  border: #bdbdbd 3px solid;
  color: #333;
}

#deleteImage:hover, #deleteSticker:hover {
  background-color: #999;
  color: #fff;
}

.modal .modal-xl .modal-content {
  padding: 2rem 4rem;
}

.modal .modal-xl .modal-content:has(.mobi) {
  padding: 2rem;
}

.modal .modal-xl .modal-content img {
  max-width: 100%;
  height: auto;
  /* border: #ddd 1px solid; */
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 0.5rem;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}

.step-content.pc {
  display: block;
}

.step-content.mobi {
  display: none;
}

@media (max-width:991px) {
  .step-content.pc {
    display: none;
  }

  .step-content.mobi {
    display: block;
  }
}

.step-content .row:first-child {
  border-radius: 10px;
  overflow: hidden;
  border: #005bac 1px solid;
  padding-bottom: 1rem;
}

.step-content .title {
  background-color: #005bac;
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

.step-item {
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media (max-width:991px) {
  .step-item {
    padding:0;
    text-align: left;
    justify-content: flex-start;
    margin-bottom: 1rem;
  }
}

.step-item h3, .step-item h4,
.step-item .h3, .step-item .h4 {
  margin: 0.5rem
}

@media (max-width:991px) {
  .step-item h4,.step-item .h4 {
  font-size:1rem
}
}

.step-item span {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.25rem;
  margin-right: 0.5rem;
  line-height: 30px;
  text-align: center;
}

.step-item h3 span,.step-item .h3 span {
  background-color: #02e1bf;
}

.step-item h4 span,.step-item .h4 span {
  background-color: #c72020;
  color: #fff;
  text-align: center;
}

.step-item span.keyboard {
  background-color: #fff;
  color: #666;
  border: #666 1px solid;
  border-radius: 10px;
  margin: 0 0.25rem;
  min-width: 30px;
  width: initial;
  padding: 0 5px;
  box-shadow: 1px 1px 0px #666;
  text-align: center;
}

.hr {
  width: 100%;
  height: 1px;
  border: #ddd dotted 1px;
  margin: 3rem 0 2rem 0;
}

.operate {
  width: 100%;
  text-align: left;
  margin: 1rem;
}
@media (max-width:991px) {
  .operate {
    margin:0 0 1rem;
  }
}
.sr-only {
    display: none;
}