.HM {  
    height: 42px;
}

.btn-main{
    display: block;
    min-width: 120px;
    border-radius: 10px;
    height: 40px;
    padding: 5px 10px;
    border: none;
    outline: none;
    background-image: linear-gradient(to left, #ed4c67, #d71d21, #6f1e51);
transition:0.3s;
}
.btn-main img{
    width: 20px;
    height: 20px;
    float: right;
    margin-top: 4px;
filter: brightness(0) saturate(100%) invert(100%) sepia(8%) saturate(32%) hue-rotate(261deg) brightness(110%) contrast(110%);
}

.btn-main span{
    width: calc(100% - 40px);
    display: block;
    float: right;
    text-align: center;
    font-size: 15px;
    color: #fff;
    margin-top: 3px;
}
.btn-main:hover{  
background-image: linear-gradient(to left, #e57588, #e74044, #d30b89);
}


.P-3{
    background: #fff;
    border-bottom: 1px solid #ddd;
box-shadow: 0px 0px 7px -1px #ddd;
}
.C-14 .pnl , .C-29 .pnl , .C-30 .pnl,  .C-31 .pnl{
padding:0px;
}
.TopLogo{
float: right;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 20px;
}
.TopLogo img{
    display: block;
    float: right;
    height: 44px;
    margin: auto;
}
.MojriWord{
float: right;
    width: 440px;
    margin-right: calc(50% - 200px);
    margin-top: 4px;
}
.TopLogin{
        margin-top: 4px;
    width: 170px;
    margin-left: 20px;
}

.TopLogin a{
display: block;
    min-width: 120px;
    border-radius: 10px;
    height: 40px;
    padding: 5px 10px;
    border: none;
    outline: none;
    background-image: linear-gradient(to left, #ed4c67, #d71d21, #6f1e51);
    transition: 0.3s;
}
.TopLogin a img{
width: 20px;
    height: 20px;
    float: right;
    margin-top: 4px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(8%) saturate(32%) hue-rotate(261deg) brightness(110%) contrast(110%);
}
.TopLogin a span, .TopLogin a font{
width: calc(100% - 40px);
    display: block;
    float: right;
    text-align: center;
    font-size: 15px;
    color: #fff;
    margin-top: 3px;
}
.TopLogin a:hover {
    background-image: linear-gradient(to left, #e57588, #e74044, #d30b89);
}

.E--2-45 ul{
    margin-bottom: 0px;
    margin-top: 5px;
}

.E--2-45 ul li span{
       font-size: 15px !important;
    margin-top: 4px !important;
    color: #3f3f3f !important;
transition:0.3s !important;
    word-spacing: -2px !important;;
}
.E--2-45 ul li span:hover{
    color: #d71d21 !important;
}


.P-1{
    min-height: calc(100vh - 394px);
}



/***Footer***/
.P-19{
    background: #fff;
    border-top: 1px solid #ddd;
    padding-top: 50px;
}
.P-21{
  background-image: url(https://crm.sgp.family/Files/Club/4/public/Footer/bgwave.jpg);
    height: 185px;
    background-repeat: repeat-x;
    background-position: bottom left;
background-color: #fff;
position: relative;
}
.R-26{
    max-width: 100% !important;
}

.FooterLogo{
    display: block;
    float: right;
    width: 160px;
    margin-right: calc(50% - 80px);
}

.FooterList{
float: right;
    width: 100%;
}
.FooterList li{
    float: right;
    width: 100%;
    margin-bottom: 8px;
    margin-top: 8px;
}
.FooterList li a{
    font-size: 15px;
    color: #3f3f3f;
    word-spacing: -1px;
    transition: 0.3s;
}
.FooterList li a:hover{
color:#d71d21;
}
.FooterAndroidDownload{
display: block;
    float: right;
    width: 160px;
    background: #000;
    border-radius: 40px;
    height: 40px;
    margin-top: 45px;
}
.FooterAndroidDownload img{
width: 28px;
    height: 28px;
    float: right;
    margin-top: 5px;
    margin-right: 8px;
}
.FooterAndroidDownload span{
    float: right;
    font-size: 15px;
    color: #fff;
    margin-top: 8px;
    text-align: center;
    margin-right: 5px;
}
.CopyRightText{
font-size: 13px;
    color: #3f3f3f;
    display: block;
    position: absolute;
    bottom: 0px;
    text-align: center;
    margin-right: calc(50% - 240px);
    padding-top: 7px;
    padding-bottom: 5px;
    width: 480px;
    backdrop-filter: blur(1px);
background-color: #ffffffab;
    border-radius: 10px 10px 0px 0px;
}


.control-label {
    color: #3f3f3f !important;
}

 .mh {
    background-color: #fff;
}
.mkmodal-md .mc{
overflow:hidden !important;
margin-top:10px !important;
}


#InfoModal .mc{
    background: #fff;
    border: none;
    border-radius: 15px;
    margin-top: 150px;
    border: 1px solid #fff;
}



#InfoModal .mh {
    height: 94px;
    background-image: url(https://crm.sgp.family/Files/Club/4/member/ModalWaveInfo.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0px -47px;
}


#InfoModal .mkmodal-md .mh{
background-image: url(https://crm.sgp.family/Files/Club/4/member/ModalWaveInfoMD.svg);
    background-position: 0px -50px;
}


@media all and (max-height:600px){
#InfoModal .mc{
margin-top:20px;
max-height:calc(100vh - 40px);
}
#InfoModal .mb {
  max-height:calc(100vh - 138px);
}
}

@media all and (max-height:900px){
#InfoModal .mkmodal-md .mc{
margin-top:20px;
max-height:calc(100vh - 40px);
}
#InfoModal .mkmodal-md .mb {
  max-height:calc(100vh - 138px);
}
}



#InfoModal .mh > img {
    margin-top: 17px;
    margin-right: 26px;
filter: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(180%) hue-rotate(90deg) brightness(118%) contrast(100%);
}
#InfoModal .mh span {
    text-align: center;
    width: calc(100% - 100px);
    margin-right: 0px;
    margin-top: 18px;
    color: #ffffff;
    font-size: 17px;
}

#InfoModal .mb{
background-image: url(https://crm.sgp.family/Files/Club/4/member/ModelInfoBody.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 10px;
}