.email_background{
  border: #1f1f1f solid;
  border-width: 0.12em;
  /* overflow: hidden; */
  position: relative;
  /* float: left; */
  margin: 3em;
  margin-bottom: 6em;
  /* padding: 2e; */
  height: 80%;
  /* top: 2.5vh; */
  width: auto;
  /* max-width: 1321px; */
  /* border-radius: 20px; */
}


.email_canvas{
  overflow: hidden;
  position: relative;
  height: 100%;
  opacity: 1;
  
  width: 100%;

  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  /* align-items: center; */
  /* justify-content: center; */
  /* flex-direction: column; */
}
    .email_canvas div{
      overflow: hidden;
      /* height: 100%; */
    }

    .email_form_collum .person-details{
      align-items: center;
      
      display: flex;
      
      flex-wrap: wrap;
      height: 100%;
      
      justify-content: center;
      position: relative;

    }

    .email_form_collum .person-details h1{
      padding-bottom: 0.3125rem;
      margin-bottom: 0.9375rem;
      border-bottom: 0.0625rem solid;
      font-family: "GalleryModern";
      font-size: 2rem;
      font-weight: 100px;
      text-align: left;
      color: rgb(0, 0, 0);
      margin: 0 0 0 0;

    }

    .email_form_collum .person-details label{
      font-family: "Herbert-regular";
      font-style: italic;
      font-size: 1.25rem;
      font-weight: 300;
      color: #373332;
      display: block;
      text-align: left;

    }
    .email_form_collum .person-details form{
      /* width: 80%;
      top: 25%;
      height: 100%;
      left: 0%; */
      padding: 0 3em 0 0;
      margin: 0vh;
      position: relative;
      /* transform: translate(0%, 0%); */
    }
    .email_form_collum .person-details form *{
      margin: 2vh 0 3vh 0;
    }

    .email_form_collum .person-details form button{
      font-family: 'Branch';
      font-size: 1.8vh;
      line-height: 1em;
      font-weight: 900;
      white-space: nowrap;
      font-style: italic;
      text-align: center;
      vertical-align: middle;
      align-items: center;

      background: none;
      border: 0.08rem solid #373332;
      color: #1f1f1f;
      font-size: 1.25rem;
      margin: 0;
      transition: color .3s;
      width: 100%;
      letter-spacing: 0;
      text-indent: 0;
      margin-top: 2.25rem;
      padding: 0.625rem 0.9375rem;
      min-height: 5vh;
      overflow: auto;
      vertical-align: top;
      letter-spacing: 0.2vh;
      transition: all .4s ease-in;
    }

    .email_form_collum .person-details form button:hover{
      /* font-size: 8rem; */
      color: #1f1f1f58;
      letter-spacing: .7vh;
      align-content: center;
      text-align: center;
      justify-content: center;
      
    }

    .email_form_collum .person-details form input{
      font-family: serif;
      font-weight: 400;
      background: none;
      border: none;
      border-bottom: 0.0625rem solid #373332;
      font-size: 1.625rem;
      margin: 0;
      transition: color .3s;
      width: 100%;
      letter-spacing: 0;
      text-indent: 0;
      border-radius: 0;
    }

    .email_form_collum .person-details form p{
      font-family: Cormorant,serif;
      color: #373332;
      line-height: 1.3;
      font-size: 1.25rem;
      font-weight: 100;
      margin-bottom: 0!important;
    }

    .email_form_collum .person-details form input:invalid{
      color: #aa1414;
      box-shadow: none;
    }


    textarea {
      border: 0.0625rem solid #08222a;
      font-family: Cormorant,serif;
      font-weight: 400;
      background: none;
      border: -2.9375rem solid #373332;
      color: #6b1400;
      font-size: 1.25rem;
      margin: 0;
      transition: color .3s;
      width: 100%;
      letter-spacing: 0;
      text-indent: 0;
      border-radius: 0;
      margin-top: 1.25rem;
      padding: 0.625rem 0.9375rem;
      min-height: 10vh;
      overflow: auto;
      vertical-align: top;
    }
                .email_smll_frame .email_smll_text{
                    position: absolute;
                    background-color: #ffffff;
                    border: #1f1f1f solid;
                    border-width: 0.07em;
                    left: 50%;
                    bottom: -1%;
                    width: 39vh;
                    height: 13vh;
                    transform: translate(-50%, 0%);
                }

                .random_smll_content .random_smll_frame .random_smll_text h1,
                .random_smll_content .random_smll_frame .random_smll_text h2{
                    font-family: "GalleryModern";
                    font-size: 2rem;
                    font-weight: 100px;
                    text-align: center;
                    color: rgb(0, 0, 0);
                    margin: 0 0 0 0;
                }

                .random_smll_content .random_smll_frame .random_smll_text h2{
                  padding-top: 0.4em;
              }

                .random_smll_content .random_smll_frame .random_smll_text h3{
                  font-family: 'Gill Sans', sans-serif;
                  font-size: 1.4rem;
                  font-weight: 100px;
                  text-align: left;
                  color: rgb(0, 0, 0);
                  margin: 0 0 0 0;
                  text-align: center;
              }

                .random_smll_content .random_smll_frame .random_smll_text p{
                  font-family: 'Noto Sans Thai', sans-serif;
                  line-height: 1.4em;
                  font-size: 14px;
                  font-weight: 100px;
                  text-align: left;
                  color: rgb(0, 0, 0);
                  margin: 0 0 0 0;
                }



    .email_form_collum .person-details{
      align-items: center;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      height: 100%;
      -ms-flex-pack: center;
      justify-content: center;
      position: relative;

    }
.emails_flowers{
  /* padding: 17vh 0vh 3vh 0vh; */
  /* top: 25%;
  height: 100%;
  left: 50%; */
  width: 100%;
  /* padding: 0 0 0 0; */
  padding-top: 3em;
  margin: 0 0 0 3vh;
  position: relative;
  /* transform: translate(-50%, 0%); */
  
}
        .emails_flowers h1{
          padding-bottom: 0.3125rem;
          margin-bottom: 0.9375rem;
          border-bottom: 0.0625rem solid;
          font-family: "GalleryModern";
          font-size: 2rem;
          font-weight: 100px;
          text-align: left;
          color: rgb(0, 0, 0);
          margin: 2vh 0 3vh 0;
        }
        .emails_flowers .wrapper {
          align-items: center;
          
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          height: 100%;
          -ms-flex-pack: center;
          justify-content: center;
          position: relative;
          display: grid;

          height: 42%;
          width: 100%;
          /* padding: 10px; */
          padding-top: 2vh;

          grid-template-columns: 1fr 1fr 1fr;
          width: auto;
          height: auto;
        }

        .emails_flowers .wrapper div{
          margin: 2vh 0 2vh;

        }

                .emails_flowers .wrapper div img{
                  cursor: pointer;
                  width: 6.3vh;
                  height: 6.3vh;
                  margin: 0px;
                  padding: 5px;
                  margin-left: auto;
                  margin-right: auto;
                  display: grid;
                  /* border: #1f1f1f solid; */
                  /* background-color: rgb(132, 198, 255); */
                  border-radius: 2em;
                  border-width: 0.1px;
                  grid-template-columns: 1fr 1fr 1fr;

                }
                        .emails_flowers .wrapper div h2{
                          font-family:'Gill Sans', sans-serif;
                          margin-top: 10px;
                          font-size: 1.1rem;
                          font-weight: 400;
                          text-align: center;
                          /* color: rgb(0, 0, 0); */
                        }
                .emails_active{
                  color: rgb(0, 0, 0);
                  border: solid #1f1f1f;
                  border-width: 0.1em;

                }
.email_form_collum{
    /* padding: 17vh 0vh 3vh 0vh; */
    /* top: 50%;
    height: auto;
    left: 50%;
    width: 50%; */
    /* padding: em; */
    margin: 0 0 0 3vh;
    position: relative;
    /* transform: translate(-50%, -50%); */
}

.emails_flowers_select{
  margin-top: 10em;
  height: 100%;
  /* width: 60%; */
}
.emails_flowers_select img{
  width: 200px;
  height: 200px;
}

.email_form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #333;
  padding: 3em;
  margin: 4rem 0;
  box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 0.5);
  /* top: 0; */
  transition: all 0.25s ease-out;
}
.email_form:hover {
    box-shadow: 14px 14px 0 0 rgba(0, 0, 0, 0.25);
    /* top: -4px; */
}

@keyframes toggleOnCheckbox {
  0% {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0) rotate(45deg);
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
  }

  100% {
    transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
  }
}