.mycontainer{
 padding-right: 10px ;
  text-align: right;
  direction: rtl;
  font-size: 150%;
  font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
 }

.verticalLineleft {
  border-left: 3px solid #ff0000;
}

.verticalLineright {
  border-right: 3px solid #ff0000;
}

  .mycllass { 
  width: 60%;
  right: 0px;
  min-height: 400px;  
  margin: 0px auto; 
  width: 700px;
  position: relative; 
  background-color: white;
  border: 2px solid #a3a3c2;
  border-radius: 15px;
  box-shadow: 10px 5px 100px #888888;
    }

    .h1{
  font-size: 48px;
  color: rgb(6, 106, 117);
  padding: 2px 0 10px 0;
  font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
  font-weight: bold;
  text-align: center;
  padding-bottom: 30px;
  background: -webkit-repeating-linear-gradient(-45deg, 
  rgb(18, 83, 93) , 
  rgb(18, 83, 93) 20px, 
  rgb(64, 111, 118) 20px, 
  rgb(64, 111, 118) 40px, 
  rgb(18, 83, 93) 40px);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
    }

    .line{
      content: ' ';
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 10px;
  background: -moz-linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); 
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(147,184,189,0)), color-stop(20%,rgba(147,184,189,0.8)), color-stop(53%,rgba(147,184,189,1)), color-stop(79%,rgba(147,184,189,0.8)), color-stop(100%,rgba(147,184,189,0))); 
  background: -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
  background: -o-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
  background: -ms-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
  background: linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
    }


  .number,.name {
  outline: none;
  width: 30%;
  margin-top: 4px;
  text-align: center;
  padding: 10px 5px 10px 5px;  
  border: 1px solid rgb(178, 178, 178);
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
    -moz-box-sizing : content-box;
         box-sizing : content-box;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
     -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
          box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
  -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
}

  .name{
 
  width: 80%;
  
}