*{
    box-sizing: border-box;
  }
  
  .showID{
    display: none;
  }
  
  .mather{
    display: flex;
    flex-direction: row; 
    width: 100%;
  }
  
  .banner{
    display: flex;
    font-family: 'Tajawal', sans-serif;
    padding: 70px 12px 12px 12px;
    align-items:center;
    text-align:center;
    flex-wrap: wrap;
  }
    
  .banner .button{
    background-color: transparent;
    border: #6bb1b6 1px solid;
    color: black;
    padding: 9px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 20px ;
    margin: 12px 8px 2px 2px;
    transition: all 0.3s ease-in-out;
    font-family: 'Tajawal', sans-serif;
    cursor: pointer;
  }
  .banner .button:focus{
    outline: none;
  }
   
  .banner .button:hover{
    background-color:LightSlateGray;
    color: white;
  }
  
  .banner .apartment{
    display: none;
  }
  
  .new {
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content:center;
    width: 100%;
  }
  
  .content{
    text-align:center;
    border-radius: 10px;
    background: white;
    width: 40%;
    padding-bottom: 50px;
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  }
  
  .close {
    position: relative;
    left: 20px;
    top: 60;
    color: #6bb1b6;
    opacity: 0.6;
    font-size: 35px;
    float: left;
  }
    
  .close:hover,
  .close:focus {
    color:rgb(218, 120, 120);
    cursor: pointer;
  }
  
  .bigTitle{
    padding-top: 50px;
  }
  
  h3{
    color: #354E71;
    font-size: 22px;
    text-align: center;
  }
  
  h4{
    color: #354E71;
    text-align: right;
    padding: 0px 47px;
    font-size: 16px;
  }

  small{
    color: darkgreen;
    float: right;
    padding: 0px 60px;
  }
  
  .tit{
   text-align: center;
   padding: 12px;
  }
    
  .new .forminput{
    color: #333;
    padding: 7px;
    margin:12px;
    font-size: 16px;
    width: 85%;
    border: 1px solid #ccc;
    font-family: 'Tajawal', sans-serif;
    background-color: transparent;
    border-radius: 5px;
    text-align:right;
  }
  
  .new .forminput:placeholder {
    color: #d4d4d4;
  }
  
  select {
    color: #333;
    padding: 7px;
    margin:12px;
    text-align: right;
    text-decoration: none;
    font-size: 16px;
    width: 85%;
    border: 1px solid #ccc;
    font-family: 'Tajawal', sans-serif;
    background-color: transparent;
    border-radius: 5px;
  }
  .content  select {
    color: #333;
    padding: 7px;
    margin:12px;
    text-align: right;
    text-decoration: none;
    font-size: 16px;
    width: 85%;
    border: 1px solid #ccc;
    font-family: 'Tajawal', sans-serif;
    background-color: transparent;
    border-radius: 5px;
  }

  .select2-container--default{
    color: #333;
    text-align: right;
    font-size: 16px;
    padding:0px;
    border: 1px solid #ccc;
    
  }

  .select2-selection{
    height: 37px !important;
    justify-content: center;
  }


  
  .new .btn-send{
    padding: 10px 30px;
    margin: 12px;
    background-color:#6bb1b6;
    border-radius: 5px 5px 5px 5px;
    width:70%;
    border:none;
    color:white;
    font-family: 'Tajawal', sans-serif;
    cursor:pointer;
  }
  
  .new .btn-send:hover{
    background-color:LightSlateGray;
  }
  
  #btn2{
    padding: 9px 30px;
    margin: 14px;
    border-radius: 5px 5px 5px 5px;
    border:none;
    color:white;
    font-family: 'Tajawal', sans-serif;
    cursor:pointer;
    float:right;
    background-color:rgb(218, 120, 120);
  }
  
  *:focus{
    outline:none;
  }
  
  .content .imageupload > img{
    width: 100%;
    height:60%;
  }
  .content .imageupload {
    margin: 20px;
    text-align: center;
    padding:0px;
    width:90%;
  }
  
  .content #alert{
    color: rgb(218, 120, 120);
  }
  
  iframe{
    width:80%;
    height:240px;
  }
  
  #name:hover{
    background-color:transparent;
  }
  
  @media(max-width:1200px){
    .content{
      width: 57%;
    }
  }
  
  @media (max-width:950px){
    body{
      font-size:18px;
      line-height: 1.5;
    }
    .new {
      width: 100%;
      display: flex;
      position: absolute;
    }
  
    .content{
      border-radius:0px;
      width: 100%;
    }
  
  
    .close {
      left: 30px;
      top: 20px;
      opacity: 0.6;
      font-size: 30px;
    }
    h3 {
      font-size:20px;
    }
  
    h4{
      font-size: 18px;
      padding: 0px 38px;
      margin:0px;
    }
    .new .btn-send{
      font-size: 18px;
    } 
    .new .forminput{
      font-size: 18px;
      padding: 10px;
    }

    .content  select {
      padding: 12px;
      margin:12px;
    }
  
    iframe{
      width:80%;
      height:190px;
    }
    
  
  }