.twibbon-block {
    background: #f8f8fc;
    
}

.twibbon-block .canvas-block {
    text-align: center;
    background: #fff;
    /* max-width: 600px; */

    display: table;
    margin: 0 auto;
    padding: 50px 50px 50px 50px;
}

.canvas-block .upload-hint {
    text-align: left;
    font-style: italic;
    margin-bottom: 20px;
}

.twibbon-block 
.twibbon-info {
    padding: 30px 0 10px 0;
}

.twibbon-block .canvas-block p {
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.twibbon-block .canvas-block h2 {
    margin-bottom: 0px;
}

.twibbon-block 
.canvas-block
canvas {
    /* border: 1px solid red; */
    position: unset;
    width: 560px;
    padding: 10px 10px;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23707070FF' stroke-width='4' stroke-dasharray='8,12' stroke-linecap='square'/%3E%3C/svg%3E");
}
  
.bordercanvas {
    width: 560px;
    padding: 10px 10px;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23707070FF' stroke-width='4' stroke-dasharray='8,12' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* CSS */
.button-9 {
  appearance: button;
  backface-visibility: hidden;
  background-color: #405cf5;
  border-radius: 6px;
  border-width: 0;
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
  font-size: 100%;
  height: 44px;
  line-height: 1.15;
  margin: 12px 0 0;
  outline: none;
  overflow: hidden;
  padding: 0 25px;
  position: relative;
  text-align: center;
  text-transform: none;
  transform: translateZ(0);
  transition: all .2s,box-shadow .08s ease-in;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
}

.button-9:disabled {
  cursor: default;
}

.button-9:focus {
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}

.button-9:after {
    content: '';
    width: 0px;
    height: 0;
}
.button-9:before {
    content: '';
    height: 0;
}

/* .frame-zoom {
    background-color: #D3EEEC;
    position: relative;
    box-sizing: border-box;
    padding: 8px;
    width: fit-content;
}
.frame-zoom::after {
    content: "";
    clear: both;
    display: table;
  } */

  .frame-scale {
    margin: auto;
    display: flex;
    width: 40%;
    background-color: #f8f8fc;
    padding: 10px;
    border-radius: 7px;
  }

  .frame-scale .action {
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #ff5157;
    border-radius: 7px;
    cursor: pointer;
  }

  .frame-scale .action:hover {
    background-color: #e04b4e;  
  }
  
  @media (min-width: 1199px) {

    .frame-scale {
        margin: auto;
        display: flex;
        width: 40% !important;
      }
}

@media (min-width: 480px) {

    .frame-scale {
        margin: auto;
        display: flex;
        width: 100%;
      }
}

@media (max-width: 767px) {
    .twibbon-block h2 {
        text-align: center !important;
    }
    .frame-scale {
        margin: auto;
        display: flex;
        width: 100%;
    }
    .twibbon-block 
    .canvas-block
    canvas  {
        max-width: 100%;
        
    }

    .twibbon-block .canvas-block {
        padding: 15px 15px;
    }
}