.container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 40px;
    display:flex;
  }

  .container-project {
    max-width: 1850px;
    margin:auto;
    padding: 0px;
    display:flex;
    margin-top:50px;
  }

.container-left {
    width:500px;
    margin: 0 auto;
    padding: 40px;
    float:left;
    left:0;
    border-right: 1px solid #e6e6e6 ;
  }
.container-right {
    width: 50%;
    margin: 0 auto;
    padding: 40px;
    float:right;
    right:0;
  }
/* Specific flex container which is used for project pages*/

/* Checkpoints */
.uk-timeline .uk-timeline-item .uk-card {
	max-height: 500px;
}

.uk-timeline .uk-timeline-item {
    /*display: flex;*/
    position: relative;
}

.uk-timeline .uk-timeline-item::before {
    content: "";
    height: 100%;
    left: 19px;
    position: absolute;
    top: 20px;
    width: 2px;
		z-index: -1;
}

.uk-timeline .uk-timeline-item .uk-timeline-icon .uk-badge {
		margin-top: 20px;
    width: 40px;
    height: 40px;
}

.uk-timeline .uk-timeline-item .uk-timeline-content {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0 0 0 1rem;
}

.uk-card-reward{
  max-width: 300px;

}

.uk-card-subtitle{
  font-size: 20px;
  margin-top: 0px;
  color:#0b7dda !important;
}
.uk-card-reward:hover{
  box-shadow: 0px 11px 42px 1px rgba(58, 52, 82, 0.1);
}
.rewardimg{
  max-height: 200px;
}
.pReward {
  font-size:12px;
  padding-left: 10px;
  padding-right: 10px;
  margin:0;
}

.uk-card-title-left{
  left:0;
  float:left;

}
.uk-card-title-right{
  right:0;
  float:right;
}

.checkpointamount{
  float:right;
}

#divAddRequest .uk-card{
    max-height: none;
    height: auto;
    overflow: visible;
}

#divAddRequest .uk-card-body{
    padding-top: 10px;
}

.pFND{
    color: #0b7dda;
    font-size: 20px;
    float: right;
    font-weight: 500;
    margin-top: 3px;
}

/* Styling info field */
.uk-panel{
  max-width:1200px;
  margin:auto;
}

/* share button */
.popup{
  position: fixed;
  top: 50%;
  left: 50%;
  background: #fff;
  padding: 24px;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 15px;
  width: 400px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  transform: translate(-50%, -50%) scale(1.2);
  transition: top 0s 0.2s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
}

.view-modal:hover {
  opacity:0.8;
  text-decoration: none;
}
.view-modal:focus {
  outline:0;
}
.view-modal{
  color: #F5CC0E;
  outline: none;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  font-size:23px;
}
.popup.show{
  top: 50%;
  left: 50%;
  z-index:1000;
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;

}
.popup.show_backerpage{
  top: 50%;
  z-index:1000;
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;

}

.popup :is(header, .icons, .field){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popup header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9;
}
.header-share span{
  font-size: 21px;
  font-weight: 600;

}
.header-share .close, .icons a{
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.header-share .close{
  color: #878787 !important;
  font-size: 17px;
  background: #f2f3fb;
  height: 33px;
  width: 33px;
  cursor: pointer;
  opacity: 1 !important;

}
.header-share .close:hover{
  background: #ebedf9;
}
.popup .content{
  margin: 20px;
}
.popup .icons{
  margin: 15px 0 20px 0;
}
.content p{
  font-size: 16px;
}
.content .icons a{
  height: 50px;
  width: 50px;
  font-size: 20px;
  text-decoration: none;
  border: 1px solid transparent;
}
.icons a i{
  transition: transform 0.3s ease-in-out;
}
.twittersvg{
  height:20px;
  transition: transform 0.3s ease-in-out;
}
.icons a:nth-child(1){
  color: #1877F2;
  border-color: #b7d4fb;
}
.icons a:nth-child(1):hover{
  background: #1877F2;
}
.icons a:nth-child(2){
  color: #121212;
  border-color: #000000;
}
.icons a:nth-child(2):hover{
  background: #121212;
}
.icons a:nth-child(3){
  color: #25D366;
  border-color: #bef4d2;
}
.icons a:nth-child(3):hover{
  background: #25D366;
}
.icons a:nth-child(4){
  color: #0088cc;
  border-color: #b3e6ff;
}
.icons a:nth-child(4):hover{
  background: #0088cc;
}
.icons a:hover{
  color: #fff;
  border-color: transparent;
}
.icons a:hover i{
  transform: scale(1.2);
}
.icons a:hover .twittersvg{
  transform: scale(1.2); 
  fill: white; 
}

.content .field{
  margin: 12px 0 -5px 0;
  height: 45px;
  border-radius: 4px;
  padding: 0 5px;
  border: 1px solid #e1e1e1;

}
.field.active{
  border-color: #F5CC0E;
}
.field i{
  width: 50px;
  font-size: 18px;
  text-align: center;
}
.field.active i{
  color: #F5CC0E;
}
.field input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
}
.field button{
  color: #fff;
  padding: 5px 18px;
  background: #F5CC0E;
  border:none;
  border-radius: 5px;
}
.field button:hover{
  background: #F5CC0E;
}



/* payment pop up community page */
@media (max-width: 991.98px) {
  .popupbuy{
    width: 364px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    border-radius: 0px !important;
  }
  .popupbuy.showbuy{
    padding-left: 28px !important;
    padding-right: 28px !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 40px;

  } 

  .popup{
    width: 364px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .popup.show{
    padding-left: 28px !important;
    padding-right: 28px !important;
  } 

  .popupsell{
    width: 364px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    border-radius: 0px !important;

  }
  .popupsell.showsell{
    padding-left: 28px !important;
    padding-right: 28px !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 40px;

  } 
  .popuplogin{
    width: 364px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    border-radius: 0px !important;
  }
  .popuplogin.showlogin{
    padding-left: 28px !important;
    padding-right: 28px !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 40px;

  } 

  .popupproduct{
    width: 364px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .popupproduct.showproduct{
    padding-left: 28px !important;
    padding-right: 28px !important
  } 


}
.popupbuy{
  position: fixed;
  top: 50%;
  left: 50%;
  background: #fff;
  padding: 24px;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 15px;
  width: 400px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  transform: translate(-50%, -50%) scale(1.2);
  transition: top 0s 0.2s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;  
}
.popupbuy.showbuy{
  top: 50%;
  left: 50%;
  z-index:1000;
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
}

.popupbuy :is(header, .icons, .field){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popupbuy header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9;
}
.popupbuy .contentbuy{
  margin: 20px 0;
}
.popupbuy .icons{
  margin: 15px 0 20px 0;
}
.headerbuy .closebuy, .icons a{
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.headerbuy .closebuy{
  color: #878787 !important;
  font-size: 17px;
  background: #f2f3fb !important;
  height: 33px;
  width: 33px;
  cursor: pointer;
}
.headerbuy .closebuy:hover{
  background: #ebedf9;
}
.popupbuy header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9 !important;
}
.headerbuy span{
  font-size: 21px;
  font-weight: 600;

}
.headersend .closebuy, .icons a{
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.headersend .closebuy{
  color: #878787 !important;
  font-size: 17px;
  background: #f2f3fb !important;
  height: 33px;
  width: 33px;
  cursor: pointer;
}
.headersend .closebuy:hover{
  background: #ebedf9;
}
.headersend span{
  font-size: 21px;
  font-weight: 600;

}

.buymodal{
  display: none ; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width:100%;
  max-width: 100vw !important;
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.btnbuy {
  border-radius:5px;
  border:2px solid #f2f3fb;
  background:#FFF;
  color:#f2f3fb;
  cursor:pointer;
  margin-top: 10px;
  border-radius:15px;
  font-size:18px;
  height:100px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;

}
.btnbuy:hover {
  opacity:0.9;
  background:#f2f3fb;

}
.btnbuy:focus {
  outline:0;
}
/* sell modal */

.sellmodal{
  display: none ; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width:100%;
  max-width: 100vw !important;
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* payment pop up community page */
.popupsell{
  position: fixed;
  top: 50%;
  left: 50%;
  background: #fff;
  padding: 24px;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 15px;
  width: 400px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  transform: translate(-50%, -50%) scale(1.2);
  transition: top 0s 0.2s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
            
}
.popupsell.showsell{
  top: 50%;
  left: 50%;
  z-index:1000;
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;

}
.popupsell :is(header, .icons, .field){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popupsell header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9;
}
.popupsell .contentsell{
  margin: 20px 0;
}
.popupsell .icons{
  margin: 15px 0 20px 0;
}


.headersell .closesell, .icons a{
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.headersell .closesell{
  color: #878787 !important;
  font-size: 17px;
  background: #f2f3fb !important;
  height: 33px;
  width: 33px;
  cursor: pointer;
}
.headersell .closesell:hover{
  background: #ebedf9;
}
.popupsell header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9 !important;
}
.headersell span{
  font-size: 21px;
  font-weight: 600;

}
.sellmodal{
  display: none ; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.btnsell {
  border-radius:5px;
  border:2px solid #f2f3fb;
  background:#FFF;
  color:#f2f3fb;
  cursor:pointer;
  margin-top: 10px;
  border-radius:15px;
  font-size:18px;
  height:100px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;

}
.btnsell:hover {
  opacity:0.9;
  background:#f2f3fb;

}
.btnsell:focus {
  outline:0;
}

/* Payment modal */
.payment-content{
  width:100%;

}

.payment-image{
  display:inline-block;
  display:inline-block;
  float: left;
  position: relative;
  left: 20px;
  width:70px;

}
.payment-text{
  display:inline-block;
  color:#000;
  padding: 4px 8px;
  margin-left:20px;
  text-align: left;
  float:left;

}
.payment-badge{
  background-color: rgb(32, 129, 226);
  color: rgb(255, 255, 255);
  border-radius: 10px;
  padding: 4px 8px;
  display:inline-block;
  float: right;
  position: relative;
  right: 20px;
  }
.payment-badge-grey{
  background-color: #f2f3fb;
  color: #878787;
  border-radius: 10px;
  padding: 4px 8px;
  display:inline-block;
  float: right;
  position: relative;
  right: 20px;
}
.paymentimg{
  height:35px;
}
#btnOpenApprove{
  font-size: 18px !important;
  padding: 6px 25px 6px 25px !important;
  border-radius: 15px;
}
#btnWallet{
  font-size: 16px !important;
  padding: 3px 25px 3px 25px !important;
  border-radius: 15px;
  border:2px solid #0b7dda;
  background-color:#FFF;text-decoration:none;color:#0b7dda;
}

#btnOpenbuy{
  font-size: 18px !important;
  padding: 6px 25px 6px 25px !important;
  border-radius: 15px;
}

#btnOpenbuy:focus {outline:0;}
#btnOpenApprove:focus {outline:0;}
#btnSell:focus {outline:0;}
#btnSend:focus {outline:0;}
#btnSwap:focus {outline:0;}

#inputApprovedValue, #inputApproveValue, #inputBuyFinalValue{
  height:70px !important;
  font-size:14pt;
  font-weight: bold !important;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  width:auto;
}
#inputBuyValue{
  height:70px !important;
  font-size:14pt;
  font-weight: bold !important;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  width:auto;

}
#inputSellValue, #inputSellValueInput,#inputBuyValue, #inputBuyValueInput, #inputSwapValue, #inputSwapValueReturn, #inputSendValue{
  height:70px !important;
  font-size:14pt;
  font-weight: bold !important;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  width:calc(100% - 90px);
}

#contentApprove p, #contentBuy p , #contentSell p{
  margin: 0px;
}

#contentApprove input, #contentBuy input, #contentSell input{
  height: 40px;
  margin-bottom: 10px;
  margin-top: 10px;

}

#contentApprove button, #contentBuy button , #contentSell button, #contentSwap button{
  background: #0b7dda;
  letter-spacing: 1px;
  color: #fff;
  padding: 6px 25px 6px 25px !important;
  font-size: 18px ;
  -webkit-border-radius: 0px;
  width: 100%;
  border-radius: 15px;
  border: none;
  -webkit-box-shadow: 0px 11px 42px 1px rgba(58, 52, 82, 0.1);
  -moz-box-shadow: 0px 11px 42px 1px rgba(58, 52, 82, 0.1);
  box-shadow: 0px 11px 42px 1px rgba(58, 52, 82, 0.1);
}

#contentbuy{
  text-align: center;
}
#contentsell{
  text-align: center;
}
.btnBuy{
  width: 100%;
  display: inline-grid !important;
  cursor: pointer;
}

.btnSell{
  width: 100%;
  display: inline-grid !important;
  cursor: pointer;

}
.btnSend{
  width: 100%;
  display: inline-grid !important;
  cursor: pointer;

}

.btnSwap{
  width: 100%;
  display: inline-grid !important;
  cursor: pointer;

}


.inputpaydiv{
  display:inline-block !important;
  margin:auto;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  width:100% !important;

}

#pUSD {
  float: right;
  text-align: center;
  margin-top: 6px;
  font-weight: bold;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  color: #FFF;
  background-color:#0b7dda;
  height: 70px !important;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin-top: 10px !important;
  width: 90px !important;

}
#selectedTokenName{
  float: right;
  width: 60px;
  text-align: center;
  margin-top: 6px;
  font-weight: bold;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  color: #FFF;
  background-color:#0b7dda;
  height: 70px !important;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin-top: 10px !important;

}




/* product community modal */
.productmodal{
  display: none ; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width:100%;
  max-width: 100vw !important;
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.popupproduct {
  position: fixed;
  top: 50%;
  left: 50%;
  background: #fff;
  padding: 24px;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 15px;
  width: 400px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  transform: translate(-50%, -50%) scale(1.2);
  transition: top 0s 0.2s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;     
}
.popupproduct.showproduct{
  top: 50%;
  left: 50%;
  z-index:1000;
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
}

.popupproduct :is(header, .icons, .field){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popupproduct header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9;
}
.popupproduct .contentproduct{
  margin: 20px 0;
}
.headerproduct .closeproduct, .icons a{
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.headerproduct .closeproduct{
  color: #878787 !important;
  font-size: 17px;
  background: #f2f3fb !important;
  height: 33px;
  width: 33px;
  cursor: pointer;
}
.headerproduct .closeproduct:hover{
  background: #ebedf9;
}
.popupproduct header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9 !important;
}
.headerproduct span{
  font-size: 21px;
  font-weight: 600;
}

/* payment pop up community page */

.popupswap {
  position: fixed;
  top: 50%;
  left: 50%;
  background: #fff;
  padding: 24px;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 15px;
  width: 400px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  transform: translate(-50%, -50%) scale(1.2);
  transition: top 0s 0.2s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
            
}
.popupswap.showswap{
  top: 50%;
  left: 50%;
  z-index:1000;
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
}
.popupswap :is(header, .icons, .field){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popupswap header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9;
}
.popupswap .contentswap{
  margin: 20px 0;
}
.popupswap .icons{
  margin: 15px 0 20px 0;
}


.headerswap .closeswap, .icons a{
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.headerswap .closeswap{
  color: #878787 !important;
  font-size: 17px;
  background: #f2f3fb !important;
  height: 33px;
  width: 33px;
  cursor: pointer;
}
.headerswap .closeswap:hover{
  background: #ebedf9;
}
.popupswap header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9 !important;
}
.headerswap span{
  font-size: 21px;
  font-weight: 600;

}
.swapmodal{
  display: none ; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.btnswap {
  border-radius:5px;
  border:2px solid #f2f3fb;
  background:#FFF;
  color:#f2f3fb;
  cursor:pointer;
  margin-top: 10px;
  border-radius:15px;
  font-size:18px;
  height:100px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;

}
.btnswap:hover {
  opacity:0.9;
  background:#f2f3fb;

}
.btnswap:focus {
  outline:0;
}

/* Login model community page */
.loginmodal{
  display: block ; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width:100%;
  max-width: 100vw !important;
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  backdrop-filter: blur(10px); /* Apply blur effect */
  -webkit-backdrop-filter: blur(10px); /* For Safari */

}

.popuplogin{
  position: fixed;
  top: 50%;
  left: 50%;
  background: #fff;
  padding: 24px;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 15px;
  width: 400px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  transform: translate(-50%, -50%) scale(1.2);
  transition: top 0s 0.2s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
            
}
.popuplogin.showlogin{
  top: 50%;
  left: 50%;
  z-index:1000;
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;

}
.popuplogin .contentlogin{
  margin: 20px 0;
}

.headerlogin span{
  font-size: 21px;
  font-weight: 600;

}

/* End Login model community page */