:root {
  /* --main-color: #7e9eb0 */
  /* --main-color: var(--main-color); */
  /* --main-color: #21739d; */
  --main-color: #116e63;
}

/* To Fix Sweet Alert */
body {
  position: static !important;
}

/* ? */
header {
  font-size: 10px;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.signContent {
  display: none;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1080px;
  box-shadow: 5px 5px 2px;
  padding: 20px;
  background-color: rgba(238, 238, 238, 0.075);
  position: relative;
}

.signContent::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #aaa;
  opacity: 0.3;
  z-index: -1;
  /* filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3)); */
}

.signContent hr {
  width: 90%;
  margin: 10px auto;
  color: var(--main-color);
}

/* inputs */

.signContent input,
.signContent textarea {
  /* margin-bottom: 10px; */
  font-size: 20px;
  padding: 10px;
  margin: 5px 0;
  width: 30%;
  border-radius: 5px;
  border: 0.5px solid #888;
  outline: none;
  background-color: #fff;
  white-space: pre-wrap;
  /* new line detect*/

  /* border: none; */
}

.signContent input.linkClass:focus,
.signContent input.linkClass {
  text-align: left;
  /* transition: 0.5s; */
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  display: none;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.signContent input.EmailLeader,
.signContent input.linkClass,
.signContent input.phoneNumber,
.signContent textarea.DescribeClass {
  width: 100%;
  /* margin-top: 20px; */
}

.signContent textarea.DescribeClass {
  resize: none;
  font-size: 15px;
  min-height: 100px;
  transition: 0.5s;
  position: relative;
}

.signContent input.phoneNumber {
  direction: ltr;
  /* transition: 0.5s; */
}

.signContent input:focus,
.signContent textarea.DescribeClass:focus {
  border: 0.5px solid var(--main-color);
  box-shadow: 0 0 5px var(--main-color);
  outline: none;
}

.changableInput {
  transition: 0.5s;
  opacity: 1;
}

.showDifference {
  -webkit-animation-name: showDifference;
  animation-name: showDifference;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

/* button */

.signContent button {
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 5px;
  border: none;
  color: #eee;
  background-color: var(--main-color);
  border: var(--main-color) 0.5px solid;
  cursor: pointer;
  margin: 0 5px;
}

.signContent button:hover {
  background-color: #eee;
  color: var(--main-color);
  border: var(--main-color) 0.5px solid;
  /* border-radius: 20px; */
}

.signContent button:focus {
  background-color: #eee;
  color: var(--main-color);
  border: var(--main-color) 0.5px solid;
}

.signContent label {
  /* margin-top: 10px; */
  color: #333;
}

.checkboxDiv {
  width: 100%;
  position: relative;
  text-align: right;
  color: #888;
}

.signContent .checkboxDiv input[type="checkbox"] {
  width: 10%;
  box-shadow: none;
}

/* h1 */
/* h1 {
    margin-top: 20px;
    margin-bottom: 5px;
    padding: 10px;
    border-bottom: #21739d solid 1px;
    color: #333;
} */

/* Checker Form */
.checkers {
  width: 100%;
  background-color: #eee;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 50px;

  /* padding-top: 80px; */
}

.checkers input[type="radio"] + label {
  padding: 10px;
  width: 100%;
  cursor: pointer;
  opacity: 0.3;
  position: relative;
}

input[id="form1"]:checked + label,
input[id="form2"]:checked + label {
  color: var(--main-color);
  font-weight: 700;
  opacity: 1;
  transition: 0.3s;
}

input[id="form1"] + label::before,
input[id="form2"] + label::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
}

input[id="form1"]:checked + label::before,
input[id="form2"]:checked + label::before {
  content: "";
  background-color: var(--main-color);
  -webkit-animation-name: moveLine;
  animation-name: moveLine;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

input[id="form1"] + label::after,
input[id="form2"] + label::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #eee;
}

input[id="form1"]:checked + label::after,
input[id="form2"]:checked + label::after {
  content: "";
  /* background-color: forward; */
  -webkit-animation-name: moveLineV;
  animation-name: moveLineV;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

input[id="form1"]:checked + label span,
input[id="form2"]:checked + label span {
  position: absolute;
  right: 0;
  top: 0;
  background-color: var(--main-color);
}

input[id="form1"]:checked + label .sp1,
input[id="form2"]:checked + label .sp1 {
  width: 2px;
  height: 20px;
}

input[id="form1"]:checked + label .sp2,
input[id="form2"]:checked + label .sp2 {
  width: 20px;
  height: 2px;
}

input[id="form1"]:hover + label,
input[id="form2"]:hover + label {
  color: var(--main-color);
  opacity: 1;
  /* border-bottom: 2px solid var(--main-color); */
}

input[id="form1"]:hover + label::before,
input[id="form2"]:hover + label::before {
  opacity: 1;
  background-color: var(--main-color);
}

.insertDefaultClassDiv {
  width: 100%;
}

.insertDefaultClassDiv button#insertDClassButton {
  background-color: transparent;
  color: var(--main-color);
  font-size: 1px;
  display: block;
  padding: 5px 10px;
  transition: 0.2s;
}

.insertDefaultClassDiv button#insertDClassButton:hover {
  background-color: var(--main-color);
  color: #fff;
}

.DescribeClassDiv {
  text-align: right;
  width: 100%;
}

.form2 {
  display: none;
}

/* Type 2 */

/* .type1 {
    background-color: var(--main-color);
}

.type2 {
    background-color: red;
} */
.type2 .signContent {
  gap: 5px;
}

.type2 .signContent input {
  width: 23%;
}

/* label .DescribeClass {
    width: 100%;
    display: block;
} */

.type2 .signContent input.phoneNumber,
.type2 .signContent input.linkClass {
  width: 50%;
}
.type4 {
  justify-content: center;
}
/* Looding */
/* from https://codepen.io/MOHAMMED_ALSIDDIG/pen/JjvBeKw  with some changes :)*/

.loader-body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 300px;
  /* position: relative; */
  position: fixed;
  border: 1px solid rgb(228, 223, 223);
  background-color: rgb(228, 223, 223);
  box-shadow: 1px 1px 25px 1px var(--main-color);
  z-index: 10;
}

.loader-title {
  color: var(--main-color);
  font-size: 25px;
  letter-spacing: 10px;
  text-transform: uppercase;
  opacity: 0.8;
  -webkit-animation: 5s title-anim linear infinite;
  animation: 5s title-anim linear infinite;
}

.loader-arrow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(0deg);
  opacity: 0.5;
  -webkit-animation: 5s rotae-arrow linear infinite;
  animation: 5s rotae-arrow linear infinite;
}

.loader-arrow::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 20px;
  top: -10.4px;
  left: 50%;
  transform: rotateX(-50%);
  background-color: var(--main-color);
  -webkit-clip-path: polygon(0% 0%, 100% 45%, 0% 98%, 24% 49%);
  clip-path: polygon(0% 0%, 100% 45%, 0% 98%, 24% 49%);
}

.looding {
  /* display: flex; */
  display: none;
  justify-content: center;
  align-items: center;
  /* position: absolute; */
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;

  background-color: #eee;
  /* cursor: auto; */
  -webkit-animation-name: looding;
  animation-name: looding;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes title-anim {
  0% {
    letter-spacing: 3px;
  }

  50% {
    letter-spacing: 1px;
  }

  100% {
    letter-spacing: 3px;
  }
}

@keyframes title-anim {
  0% {
    letter-spacing: 3px;
  }

  50% {
    letter-spacing: 1px;
  }

  100% {
    letter-spacing: 3px;
  }
}

@-webkit-keyframes rotae-arrow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotae-arrow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 500px) {
  .type1 .signContent,
  .type2 .signContent {
    flex-direction: column;
  }

  .type1 .signContent input,
  .type2 .signContent input,
  .type2 .signContent input.linkClass,
  .type2 .signContent input.phoneNumber {
    width: 100%;
  }

  .signContent {
    flex-direction: column;
  }

  .signContent input {
    width: 100%;
  }

  .checkers input[type="radio"] + label {
    width: auto;
  }

  main {
    /* display: block; */
    margin-bottom: 10px;
  }

  .checkers {
    margin-top: 90px;
  }

  section main::before,
  section main::after {
    bottom: -100px;
  }
}

@-webkit-keyframes moveLine {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes moveLine {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes moveLineV {
  0% {
    height: 0%;
    background-color: var(--main-color);
  }

  100% {
    height: 100%;
    background-color: var(--main-color);
  }
}

@keyframes moveLineV {
  0% {
    height: 0%;
    background-color: var(--main-color);
  }

  100% {
    height: 100%;
    background-color: var(--main-color);
  }
}

@-webkit-keyframes showDifference {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes showDifference {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}