body{background: #f2f2f2!important}
.copy-btn{    position: absolute;
    right: 180px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #686868;
    height: 100%;
    width: auto;
    /* border-right: 1px solid #cdcdcd; */
    padding-right: 1rem;}
.invite-section{      padding: 0px 0rem;  width: 85%;
    background: #fff;
    margin: 2rem auto;box-shadow: 0px 2px 2px #00000024;
border-radius: 4px;}
.mg-auto{margin: auto;}

.invite-page-header{width: 100%;border-bottom: 1px solid #f2f2f2;padding: 2rem 0px}
.invite-page-header h1{margin: 0px;font-size: 35px;
    font-weight: bolder;letter-spacing: 0.87px}
.invite-section h3{    letter-spacing: 0.57px;
    margin-bottom: 1rem;
    font-size: 20px;
    color: #000;}
    .bottom-div-invite .col-md-6{padding: 0px!important}
.invite-body{   background: #f2f2f233;
    padding: 2rem 0px;
    width: 100%;}
.Share-Code-div p{margin-bottom: 1rem;color: #686868}
.Share-Code-div label{position: relative;width: 913px;height: 50px;}
.Share-Code-div label input{width: 100%;height: 100%;border: none;padding-right: 171px;padding-left: 1rem;background: #6868680F;border-radius: 4px;color: #686868}
.Share-Code-div label .invite-btn{    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    width: 171px;
    border: none;
    color: #fff;
    background: #22a7de;
    border-radius: 6px;}
.bottom-div-invite{    display: flex;
    justify-content: center;
    align-items: center;}
.invite-section  p{    font-size: 14px;
    color: #686868;letter-spacing: 0.43px;}

    @media only screen and (max-width: 768px) {
      .invite-page-header .col-md-12 .media{flex-direction: row-reverse;}
      .bottom-div-invite .bottom-image-right{text-align: right;}
    .bottom-div-invite .bottom-image-right img  {width: 102px;
    padding-bottom: 10px;}
      .Share-Code-div label{width: 100%}
      .invite-section{       margin: 1rem auto 0rem auto;
    width: 100%;}
      .invite-page-header{padding: 1rem 0px;}
          .invite-page-header .media-left img{width: 80px;}
          .invite-page-header .media-left{margin-right: 1.5rem!important}
          .invite-page-header h1{font-size: 24px;}
          .bottom-div-invite{flex-direction: column;}
          .Share-Code-div label .invite-btn{    width: 110px!important;}
          .copy-btn{right: 110px;}
    }
    .copy-alert{color: #ffffff!important;
    background-color: #49AF41!important;
    border-color: #49AF41!important;
    text-align: center!important;}

.copy-alert{display: none;}

.copy-alert.show{display: block!important; animation: fade 1s ease }

@keyframes fade  {
0%{opacity: 0;}

100%{opacity: 1;}

}

  @media only screen and (min-width: 768px) {
    .invite-page-header, .invite-body{padding-left: 2rem!important;padding-right: 2rem!important}
    .bottom-div-invite{    padding: 0px 3rem;}
    .invite-page-header .col-md-12{padding: 0px!important}
  }


.copy-label{display: none}
.invite-body .invite-btn:hover .copy-label{display: inline-block!important;}
.invite-body .invite-btn:hover .invite-label {display: none;}
.invite-body .invite-btn:hover{filter: brightness(0.9);}