@font-face {
    font-family: "opensans-regular";
    src: url("../../fonts/OPENSANS-REGULAR.TTF");
  }
.partnersBody{
    width: 100%;
    background-color: #151c2c;
    font-family: "opensans-regular";
}
.partnersBanner{
    display: flex;
    justify-content: center;
    align-items: center;
/*     background-color: rgb(30, 36, 60); */
}
.partnersBanner > .bannerContainer{
    max-width: 1200px;
    height: 280px;
    display: flex;
}
.partnersBanner > .bannerContainer > img{
    width: 100%;
    object-fit: cover;
}
.partnersContainer{
    margin: 0 auto;
    padding: 32px 16px;
    max-width: 1000px;
    min-width: 248px;
}

.partnersIntro p{
    color: #aab2bf;
    margin-top: 16px;
    font-size: 14px;
}

.partnersIntro h1{
    color: #fff;
    font-size: 16px;
}
.partnersForm{
    margin-top: 16px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.partnersForm .formElement .formInput{
    border: 1px solid #39414e;
    padding: 10px;
    border-radius: 5px;

}
.partnersForm .socialMedia{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
    padding: 10px 10px 0px 10px
}

.partnersForm .formElement{
    flex-basis: 49%;
    margin-bottom: 0.20rem;
}


.partnersForm .formElement.socialField{
    flex-basis: 32%;   
}
.partnersForm .formElement.singleLine{
    flex-basis: 100%;
}
.partnersForm .formElement .formInput input{
    border: none;
    background-color: #151c2c;
    color: #aab2bf;
    outline: none;
    width: 100%;
    height: 19px;
    font-family: "opensans-regular";
    font-size: 14px;
}

.partnersForm .formElement .formInput input::placeholder, .partnersForm .formElement textarea::placeholder{
    color: #757575;
}
.partnersForm .formElement textarea{
    width: 100%;
    background-color: #151c2c;
    color: #aab2bf;
    border:none;
    outline:none;
    resize: none;
    font-family: "opensans-regular";
    font-size: 14px;
}

.partnersForm .formElement.nomargin{
    margin-bottom: 0px;
}
/*it activates if the inner element is focused :D*/
.partnersForm .formElement .formInput:focus-within{
    border: 1px solid #fff;
}
.partnersForm .formElement .otherMedia{
    color: #03bb89;
    font-family: "opensans-regular";
    font-size: 14px;
    font-weight: bold;
    text-decoration: underline;
    padding-left: 10px;
}
.partnersForm .formElement .errorArea, .partnersForm .formElement .submitArea, .partnersForm .formElement .successArea{
    display: flex;
    justify-content: center;
    align-items: center;
}
.partnersForm .formElement .errorArea{
    margin-top: 24px;
    display: none;
}

.partnersForm .formElement .errorArea span{
    color:#f83228;
    font-family: "opensans-regular";
    font-size: 14px;
    font-weight: 700;
    margin-left: 8px;
}

.partnersForm .formElement .successArea span{
    color:#fff;
    font-family: "opensans-regular";
    font-size: 14px;
    font-weight: 700;
    margin-left: 8px;
}

.partnersForm .formElement .successArea img{
    width: 32px;
    height: 32px;
}

.partnersForm .formElement .errorArea img{
    width: 16px;
    height: 16px;
}
.partnersForm .formElement .submitArea div{
    margin-top: 24px;
    font-family: "opensans-regular";
    font-weight: 700;
    color: #fff;
    background-color: #2c9e78;
    padding: 12px;
    width: 300px;
    font-size: 14px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.partnersForm .formElement .submitArea div img{
    width: 16px;
    height: 16px;
    margin-left: 8px;
    display:none;
}
.partnersForm .formElement .submitArea div:hover{
    background-color: #36b68b;
}

.removeElement{
    font-size: 12px;
    margin-left: 8px;
    text-decoration: underline;
    font-weight: 700;
    color: #36b68b;
    cursor: pointer;
}

.partnersForm .formElement .submitArea a{
    text-decoration: none;
}

@media only screen and (max-width: 767px){
    .partnersForm .formElement, .partnersForm .formElement.socialField{
        flex-basis: 100%;
    }
    .partnersForm .formElement .submitArea div{
        width: 100%;
    }
    .partnersBanner{
        max-width: 767px;
        min-width: 280px;
        height: auto;
    }

    .partnersBanner > .bannerContainer {
        background: url("//img-dev.smile.one/images/contactus/partner-mobile.jpg");
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        max-height: unset;
        height: calc(100vw * 0.3877);
    }
    .partnersBanner > .bannerContainer > img {
        display: none;
    }
}